Targeting multiple forms to send via ajax (jquery)

Question

I have multiple forms on my page. When I click the forms submit button, I want to send the form value of only that form through ajax. Here is what I have. The first form works as its supposed to, the second form actually submits the form. How can I target each form individually. I feel I should be using .find() somewhere.

 <form id="form1" method="post">
    <input type="text" id="name1" name="value" value="">
    <input type="submit"  id="update_form"  value="Save Changes">
  </form>

 <form id="form2" method="post">
    <input type="text" id="name2" name="value" value="">
    <input type="submit"  id="update_form"  value="Save Changes">
 </form>



<script>
// this is the id of the submit button
$("#update_form").click(function() {

    $.ajax({
           type: "POST",
           url: "approve_test.php",
           data: $(this.form).serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });

    return false; // avoid to execute the actual submit of the form.
});
</script>

Answer 1

Don't use same id for multiple elements. Use class instead.
Change your code to this:

<form id="form1" method="post">
    <input type="text" id="name1" name="value" value="">
    <input type="submit"  class="update_form"  value="Save Changes"> <!-- changed -->
</form>

<form id="form2" method="post">
    <input type="text" id="name2" name="value" value="">
    <input type="submit"  class="update_form"  value="Save Changes"> <!-- changed -->
</form>

<script>
// this is the class of the submit button
$(".update_form").click(function() { // changed
    $.ajax({
           type: "POST",
           url: "approve_test.php",
           data: $(this).parent().serialize(), // changed
           success: function(data) {
               alert(data); // show response from the php script.
           }
    });
    return false; // avoid to execute the actual form submission.
});
</script>

Answer 2

First, use class in your submit buttons. Be aware that ids are unique (by w3c specs)

Then in your onclick listener, get the form using closest (same as parent but targeting a specific parent; in this case it is the form element). Here is the working code:

 <form id="form2" method="post">
    <input type="text" id="name2" name="value" value="">
    <input type="submit"  class="update_form"  value="Save Changes">
 </form>



<script>
// this is the id of the submit button
$(".update_form").click(function() {
    var myform = $(this).closest("form"); //parent form
    $.ajax({
           type: "POST",
           url: "approve_test.php",
           data: myform.serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });

    return false; // avoid to execute the actual submit of the form.
});
</script>

Answer 3

There are a few problems with what you are doing here.

Multiple elements with the same id:

From your mark up, it can be seen that both form1 and form2 have the same id for their respective submit buttons. This is not valid mark up. You should have them set to something such as form1-submit and form2-submit.

Identifying the form to be submitted

In the data attribute of the AJAX request, to identify the form you want to submit, you can use:

data: $(this).parent().serialize(),

Now, to avoid code repetition by creating handlers for each of the two buttons, give both your submit buttons the same class and attach an onclick event handler to that class like this:

//Submit buttons
<input type="submit" id="submit1" class="submit-buttons" />
<input type="submit" id="submit2" class="submit-buttons" />

//Event handler
$('.submit-buttons').click(function(){
   //Your code here
});

Answer 4

<form method="post" action="form1_process.php" >
    <input type="text" name="name" />
    <input type="submit" value="Submit Form 1">
</form>

<form method="post" action="form2_process.php" >
    <input type="text" name="name" >
    <input type="submit" value="Submit Form 2">
</form>

<script>

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

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

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

            var formHTML = event.target; // formHTML element

            $.ajax({
                method: formHTML.method,
                url: formHTML.action,

                data: $( this ).serialize(), // serializes the form's elements.

                success: function(data)
                {
                    alert(data); // show response from the php script.
                }
            });          

        } );

    });

</script>

In server, form1_process.php and form2_process.php

<?php

    var_dump($_POST);

Demo

Answer 5

Try the following:

var form = $('#form1', '#form2').serialize();
$.ajax({
    type: "POST",
    url: "approve_test.php",
    data: form,
    success: function(data) {
        alert(data); // show response from the php script.
    }
});