Menu
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>
358
You can use a single ajax function to submit the multiple forms in HTML. You have to use a class for the submit button and the submit button should be inside the HTML form.
Here in this case also we have use Jquery and Jquery UI. By using Jquery UI Dialog box we have get data from user and by using Jquery code we have converted that form data into HTML table and data has been stored in hidden field in array format. Here we can add multiple number of data and store into HTML table format.
Creating a function that calls the AJAX request and using this function in setInterval() and set Interval for 5 sec. Now the function executes every 5 seconds and fetches new data from the server. It repeatedly executes the function even when the previous AJAX request is not successfully executed and return.
A standard form submit sends a new HTTP request (POST or GET) and loads the new page in the browser. In Ajax, the data is sent to the server (POST or GET) in the background, without affecting the page at all, and the response is then received by javascript in the background, again without affecting the page at all.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
