• How to create a multi-submit html form

    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

    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

    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

    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.
  • You might also like

    No comments:

    Post a Comment

    Good day precious one, We love you more than anything.

Powered by Blogger.