Wednesday, March 31, 2010

JavaScript Trick: Submitting multiple forms at once

Everyone who has worked on any web application would be quite familiar with HTML Form element. Just to give an idea, a HTML Form element is a wrapper to all HTML user input fields such as Text Field, Radio Button, and List Box etc. Once the user inputs are captured through HTML user input fields, the HTML form is submitted to the server for further processing. At the server, all the input field values are available in the request object. Using the request object interface, we retrieve the field values and apply the processing logic. This is very straight forward and works smoothly.

There is no limit of number of HTML Form element within a web page, but there is one limitation. Only one Form element can be submitted at a time. Nesting of Form elements is not restricted but they don’t serve the purpose either. If we need to submit all/multiple forms on the page, we have two workarounds. Let’s go through them using one example.

Assume we have a simple HTML page with two forms, each having one text field as below:

<html>
 <head>
  <title>Test Multi Forms</title>
 </head>
<body>
 <form name="form0" method="POST" action="abc.xyz">
  <form name="form1" method="POST" action=" abc.xyz "> 
   <input type="text" name="text1" value="value1"/>
  </form>
  <form name="form2" method="POST" action=" abc.xyz "> 
   <input type="text" name="text2" value="value2"/>
  </form>
  <input type="submit" value="submit"/>
 </form>
 </body>
</html>

If I try clicking on submit button, it doesn’t work expectedly as nesting of forms are not supported feature. If I change the submit button as <input type="button" value="submit" onclick="JavaScript:document.forms.form0.submit();"/>, the form0 looks like submitted, but in the request, I can retrieve only form1 values. This doesn’t server the purpose.

Now let’s try our workaround solutions. As these are workaround solutions, the execution/working can’t be guaranteed, but they seem to work (at least for me).

  1. Asynchronous Forms Submission: If we put our forms in flat structure (not nested as above), we can trigger both the forms in example for submission using JavaScript calls as below (same works for any number of forms in the page).

<html>
 <head>
  <title>Test Multi Forms</title>
  <script language="JavaScript">
  function fnSubmit () {
     document.forms.form1.submit();;
     document.forms.form2.submit();;
  }
  </script>
 </head>
<body>
  <form name="form1" method="POST" action=" abc.xyz "> 
   <input type="text" name="text1" value="value1"/>
  </form>
  <form name="form2" method="POST" action=" abc.xyz "> 
   <input type="text" name="text2" value="value2"/>
  </form>
  <input type="button" value="submit" onclick=" abc.xyz "/>
 </body>
</html>

This results into multiple asynchronous requests to the server; one for each form. Also the order of forms submission is uncontrolled. Second form submission request might reach to the server before first form submission request. This is applicable if we want to process each form submission request independently ignoring their sequence.

Synchronous Forms Submission: If we want to submit all forms in the page together for synchronous processing. We can exploit the DHTML capabilities by using an additional place holder form or one particular form as below:

<html>
 <head>
  <title>Test Multi Forms</title>
  <script language="JavaScript">
  function fnSubmit (){
     var form1Content = document.getElementById("form12").innerHTML;
     var form2Content = document.getElementById("form2").innerHTML;
     document.getElementById("toSubmit").innerHTML=form1Content+form2Content;
                 document.forms.toSubmit.submit();
  }
  </script>
 </head>
<body>
  <form name="form1" id="form12" method="POST" action="abc.xyz"> 
   <input type="text" name="text1" value="value1"/>
  </form>
  <form name="form2" id="form2" method="POST" action="abc.xyz"> 
   <input type="text" name="text2" value="value2"/>
  </form>
  <input type="submit" value="submit" onclick="javascript:fnSubmit();"/>
 <form name="toSubmit" method="POST" action="abc.xyz" style="display:none">
 </form>
 </body>
</html&gt;

Here at the time of submission request, I am merging the all different form contents as one hidden form content and submitting that hidden form. This way I am submitting a single form but this form contains entire content of different forms on the screen. In this case, no violation of W3C standards though the size of form contents might pose some restriction. Also this doesn’t work with nested form elements (it always ignores the first form—we might have one extra blank form if we want to do nesting though I am not sure of the need of the same).

12 comments:

  1. Thanks a lot. This solved my headache for submitting multiple forms

    ReplyDelete
  2. Second method won't work, when you put new text-box value. It only copy old value, because it is copying HTML source code which already their.

    ReplyDelete
  3. Thanks so much, saved me a day or 2 on the combining multiple forms (that were in IFrames) dilemma!

    ReplyDelete
  4. Thanks!!! I am going to use this to allow bundling of items when adding to my Paypal shopping cart since each Add to Cart button is its own form

    ReplyDelete
  5. Thank you so much, that save me a lot of time.

    ReplyDelete
  6. The "Synchronous Forms Submission" method wouldn't be applicable in a case where some of the forms are pointing to a different action.

    ReplyDelete
  7. both of the methods do not work. In the first one the submission of the first form is aborted by the submission of the second form therefore they are not processed asynchronously.

    ReplyDelete
  8. They all know nothing Who submitted $%^^$ you if you dont no nothing how can you post it At first Change the form method Post to get then you show exatly how many form r going to server same on yuo man................

    ReplyDelete
  9. How about if we have different action for each form?

    ReplyDelete