Targeting multiple forms to send via ajax (jquery)

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>

Leave a Comment