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 stackoverflow.com/questions/11373361/…

Sibu
– Sibu

2012-07-23 09:33:20 +00:00
Commented Jul 23, 2012 at 9:33 — Sibu
– Sibu, Commented Jul 23, 2012 at 9:33

Undefined · Accepted Answer · 2012-07-23 09:06:37Z

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, 2012 at 9:06

Undefined

11.4k5 gold badges39 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Thanaporn Over a year ago

Hi Sam, Thank you so much I got an idea now. Sorry I am quite new to jquery.

Undefined Over a year ago

@Thanaporn No problem at all, I would take into account the comment on your question above, its worth accepting some answers soon. Happy coding!

enTropy · Accepted Answer · 2012-07-23 09:06:22Z

1

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

answered Jul 23, 2012 at 9:06

enTropy

6214 silver badges14 bronze badges

Comments

antelove · Accepted Answer · 2021-01-25 14:41:28Z

/* 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)

Collectives™ on Stack Overflow

Jquery submit multiple forms in a page

3 Answers 3

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Linked

Related