You are here: Home » All Posts » Web forms » How to create a multi-submit form

How to create a multi-submit form

in Web forms

Imagine you have a form that needs to be processed by different scripts based on user’s input.
(example: ‘update’ or ‘create new’) . You can use JavaScript to switch the action field of the form just when the submit button is pressed. See the page below for some examples:
Switching the form’s ‘action’ field dynamically

What we will try to do in this post is still more adventurous: submitting the same form to multiple scripts at the same time!
Single form multiple action scripts

Submitting the same form to different scripts at the same time

Is it possible to submit the same form to different scripts?
One occasion where this may be required is when you want to save the form submission to database and want to submit the submission to a third party processor (like payment processor or subscription). There are better methods of doing that; more on that later. For now, let us see whether it is possible at all to submit the same form to different scripts.

Submitting a form without refreshing the page

When you submit a form, the page redirects to the response page. This prevents us from
submitting the form again to another script.

The solution is to use IFrame. There is an attribute ‘target’ that can be used with the form. Create
an IFrame, make the ‘target’ of the form to be the IFrame. The response from a form submission gets redirected to the target frame.

Here is the sample code that shows this method:

<form id='myform' action='action.php' method='POST' target='formresponse'>
<label for='name' >Your Full Name*: </label><br/>
<input type='text' name='name' id='name' maxlength="50" /><br/>
<label for='email' >Email Address*:</label><br/>
<input type='text' name='email' id='email' maxlength="50" /><br/>
<input type='button' name='Submit' value='Submit' />
</form>

<iframe name='formresponse' width='300' height='200'></frame>

You can hide the IFrame if required.

See the code in action! Same page form submission demo page

Download the code

Multi-submitting the form

We need a fairly simple piece of JavaScript to multi-submit a form. Each of the form submissions can be redirected to an IFrame.

The code below shows how to do that.

function SubmitForm()
{
     document.forms['contactus'].action='action1.php';
     document.forms['contactus'].target='frame_result1';
     document.forms['contactus'].submit();

     document.forms['contactus'].action='action2.php';
     document.forms['contactus'].target='frame_result2';
     document.forms['contactus'].submit();
     return true;
}

The SubmitForm() function submits the form twice. Switching the ‘action’ field and the ‘target’ field each time.

The SubmitForm() function is called when submit button is pressed.

See this in action: Multi-submit form demo page

Download code

More fun with multi-submit forms!

How about searching Google and Bing at the same time?
single form to search Google and Bing
All that we have to do is to submit a search form both to Google and Bing

Here is the code:

function SubmitForm()
{
    document.forms['search'].action='http://www.google.com/search';
    document.forms['search'].target='frame_result1';
    document.forms['search'].submit();

    document.forms['search'].action='http://www.bing.com/search';
    document.forms['search'].target='frame_result2';
    document.forms['search'].submit();
    return true;
}

Try it yourself:
multi-submit search

Download code

Better methods

Depending on the client side script for your core logic is not a good practice.
The client side script is open to everyone making it easy to beat or break your system. So, multi-submit form may not be a good solution for all applications.

The right method is to encapsulate the core processing on the server side itself. If you
want to use a third party service, see whether they have a web service API. Use that service when available.

Be Sociable, Share!
  • http://url author

    Sounds interesting…

  • Goobernut

    This is very easy to do *server-side* if the server supports PHP.

    Just post the form data to a simple little php script which contains this:

    • http://autoemailer.net AutoEmailer

      “Just post the form data to a simple little php script which contains this:” What comes after this, please? I see nothing.

  • 256studio

    when i load the page the popup shows in the bottom left corner till I click close on the box. How can i fix it from loading till i click on the link..

  • fsnow55

    The google and bing example works with the single submit because the query string for both happens to be ‘q’.
    If they are different, the code don’t work e.g.
    term and i, resp. in these 2 searches:
    http://www.eetimes.com/encyclopedia/defineterm.jhtml?term=

    http://www.wolframalpha.com/input/?i=

    How does one submit to the different queries with the single submit button in this case?

    Thanks

  • http://- Endang

    I am testing this technique for sending to two different website with capcha code, but only work for first website, for the second website etc… my capcha code is rejected, how to solve this problem..?, i am newbie, i hope this program can send my ad to many classifed ad’s website with one click only, not one by one.
     
    Please help me…
    sorry for my poor English language..

  • http://www.cedarfundingbankruptcy.com tony

    this is a very useful script for php user.
    do you have this for ASP or ASPX webpages.

    Thanks,

    Tony

  • http://www.cabe.co.za bongumusa

    How to put your Email on this form that it can send to my two different Emails, yahoo & the cabe Email.
    how do you put that code?

    your stuff is super helpful

  • http://www.ezeelive.com/ Rajeev

    Nice blog.. thanks for sharing..

  • http://8upwithgraphics.com Joel

    Outstanding !

Previous post:

Next post: