0

I have forms in loop that are created dynamically , and I need to submit all of them with one click, i am following the code below. Can you please suggest me how can I do this thanks. 

 <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#submitButton").click(function () {
                    $.post($("#form1").attr("action"), $("#form1").serialize(),
                      function () {
                          alert('Form 1 submitted');
                      });

                    $.post($("#form2").attr("action"), $("#form1").serialize(),
                      function () {
                          alert('Form 2 submitted');
                      });
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" action="PostPage1.aspx" method="post">
            <input type="button" id="submitButton" value="Submit" />
        </form>

        <!-- Hidden form -->
        <form id="form2" action="PostPage2.aspx" name= "formsub"  method="post">
            <input type="test" id="data1" value="testing1" />
            <input type="text" id="data2" value="testing2" />
        </form>

        <form id="form2" action="PostPage2.aspx" name= "formsub" method="post">
            <input type="test" id="data1" value="testing1" />
            <input type="text" id="data2" value="testing2" />
        </form>

    </body>
    </html>
Pierrick Rambaud
  • 1,726
  • 1
  • 20
  • 47
user2959035
  • 13
  • 1
  • 5
  • Any specific reason of having multiple forms with different action attributes and submitting them on single click? This seems illogical to me. – Ankit Jaiswal Nov 06 '13 at 06:00

1 Answers1

5

You can iterate through all the forms with the given name and submit one by one

$(document).ready(function () {
    $("#submitButton").click(function () {
        var $form1 = $("#form1");
        $.post($form1.attr("action"), $form1.serialize(), function () {
            alert('Form 1 submitted');
        });

        $('form[name="formsub"]').each(function () {
            var $form = $(this);
            $.post($form.attr("action"), $form.serialize(), function () {
                alert('Form 2 submitted');
            });
        })
    });
});
Arun P Johny
  • 384,651
  • 66
  • 527
  • 531
  • I need to do something similar for this Wizzard http://sathomas.me/acc-wizard/ which has each step as a seperate FORM and then 1 Submit button at the end...is there a way to get all the fields from all the Forms and submit them all as one POST array? SO in my backend PHP script, it would appear that it is just 1 Form submitting a large set of fields instead of 10 different forms posting? – JasonDavis Aug 20 '14 at 20:17
  • 1
    @jasondavis I guess you could do something like `var params = $('form').map(function () { return $(this).serializeArray(); }).get(); $.post('', params, function () { alert('Form 2 submitted'); });` – Arun P Johny Aug 21 '14 at 00:52