HTML.form.guide

How to create a multi-submit form

form action form submit 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.

See Also

Categories