Jquery submit multiple forms in a page

Question

I searched and found the nice code from here. Submit a form using jQuery

    <input type='button' value='Submit form' onClick='submitDetailsForm()' />
<script language ="javascript" type = "text/javascript" >
    function submitDetailsForm()
    {
       $("#formId").submit();
    }
</script>

But can you please advise how to deal with multiple form within a page such?

<form id="myForm1" action="comment.php" method="post"></form>
<form id="myForm2" action="comment.php" method="post"></form>
<form id="myForm3" action="comment.php" method="post"></form>
<form id="myForm4" action="comment.php" method="post"></form>

exact duplicate http://stackoverflow.com/questions/11373361/jquery-multiple-forms-submit — Sibu, Jul 23 '12 at 09:33

score 9 · Accepted Answer · answered Jul 23 '12 at 09:06

9

I would suggest putting a class on every input button you wish to submit like this.

For example you could have some forms like this:

<form id="form1">
  <!--Form elements-->
  <input class="submitButton" type="button" value="submit" />
</form>
<form id="form2">
  <!--Form elements-->
  <input class="submitButton" type="button" value="submit" />
</form>

You could then use jQuery to submit them like this:

$(".submitButton").click(function() {

  //Select the parent form and submit
  $(this).parent("form").submit();

});

answered Jul 23 '12 at 09:06

Undefined

11,234
5
37
62

Hi Sam, Thank you so much I got an idea now. Sorry I am quite new to jquery. – Thanaporn Jul 23 '12 at 10:43
@Thanaporn No problem at all, I would take into account the comment on your question above, its worth accepting some answers soon. Happy coding! – Undefined Jul 23 '12 at 10:44

score 1 · Answer 2 · answered Jul 23 '12 at 09:06

There is no way to accomplish this without Ajax. When you submit a form you are in fact making an http request, so a whole new html page will load.

The only way to avoid this is by sending the form via Ajax, so you can control the response of the petition (and therefore nothing stops you from sending more than one form via this way).

You can achieve this with this jQuery plugin

antelove · Answer 3 · 2021-01-25T14:41:28.507

/* get all form and loop foreach */
$( "form" ).each( function() {

    /* addEventListener onsubmit each form */
    $( this ).bind( "submit", function(event) {

        /* return false */
        event.preventDefault();

        /* display each props of forms */
        console.log( event.target ); // object formHTML
        console.log( "form id: " + event.target.id );
        console.log( "form action: " + event.target.action );
        console.log( "form method: " + event.target.method );

    } );

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="myForm1" action="comment1.php" method="post">
    <input type="submit" value="Submit Form1" />
</form>
<form id="myForm2" action="comment2.php" method="post">
    <input type="submit" value="Submit Form2" />
</form>
<form id="myForm3" action="comment3.php" method="post">
    <input type="submit" value="Submit Form3" />  
</form>
<form id="myForm4" action="comment4.php" method="post">
    <input type="submit" value="Submit Form4" />  
</form>

Codepen

Repl (DEMO)

Jquery submit multiple forms in a page

3 Answers3