Improving user experience: Return Url

You are filling out a web form and suddenly you face a problem: You cannot find the option you need from the provided list. You soon realize you can add a new value there pretty easy and you jump into a new UI screen. You save your new value and ... you get lost when you realize your initial form has to be filled out again. Simply put: state is gone.

Here is a suggestion:
1. Use JQuery to build a returnUrl that includes the current state of the form and provide it as a parameter when you navigate out of the current form. Here is an example that does that assuming you assign to your "Add" anchor a class named "addAndReturn"

 $(document).ready(function() {  
  //  
  //Change the link to include the returnUrl   
  //       
  $('.addAndReturn').click(function() {  
      var form = $(this).parents('form:first');  
      var queryString = form.serialize();  
      //getting rid of the submission flag, in this case hidden field "submitted"  
      queryString = queryString.replace(/submitted=[^&]*/, '');  
      var returnUrl = window.location.pathname + '?' + queryString;  
      $(this).attr("href", $(this).attr("href") + '?returnUrl=' + $.URLEncode(returnUrl));  
   return true;  
  });   
 });  

2. Include a hidden field in the "Add" page. Showing here some JSTL (assuming JSP is used)

<input type="hidden" name="returnUrl" value="${param.returnUrl}">

3. Modify your controller "add action" to look for the existence of "returnUrl". Change the relevant id from the returnUrl:

  String replaceParamValueInUrl(String url, String param, String newValue) {  
     if(url == null || Utils.isEmpty(param)) {  
       return url;  
     }else{  
       return url.replaceFirst(param + "=[^&]*", param + "=" + newValue);  
     }  
 }  

4. Redirect to returnUrl.

Users will appreciate this.

Using POST

I argue all the time about allowing GET in forms. Let us not get into that argument but rather discuss the alternative when using POST.

To use POST you will need to use the server session. However the session handling might get tedious as you really want to make sure to clean the returnURL parameter from the session. If you are using Spring MVC this is the time for you to look into flash attributes. You will need to pull the parameter value from the getParameter() method (Make sure it is sanitized). Finally you might want to force a post when clicking the link for which a jquery plugin like jquery.postlink.js can help:

//
    //Change the link to include the returnUrl
    //
    $('.addAndReturn').click(function() {
        var form = $(this).parents('form:first');
        var queryString = form.serialize();
        //getting rid of the submission flag, in this case hidden field "submitted"
        queryString = queryString.replace(/submitted=[^&]*/, '');
        var returnUrl = window.location.pathname + '?' + queryString;
        $(this).attr("href", $(this).attr("href") + '&returnUrl=' + $.URLEncode(returnUrl));
        return true;
    });
    
    //
    // Change the link to perform a POST when clicked
    //
    $('.addAndReturn').postlink();