Targeting multiple forms to send via ajax (jquery) -
i have multiple forms on page. when click forms submit button, want send form value of form through ajax. here have. first form works supposed to, second form submits form. how can target each form individually. feel should 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> // id of submit button $("#update_form").click(function() { $.ajax({ type: "post", url: "approve_test.php", data: $(this.form).serialize(), // serializes form's elements. success: function(data) { alert(data); // show response php script. } }); return false; // avoid execute actual submit of form. }); </script>
don't use same id multiple elements. use class.
change code 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> // class of 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 php script. } }); return false; // avoid execute actual submit of form. }); </script>
Comments
Post a Comment