Multiple forms using same AJAX call with different outcomes? - php

Question

If I have many forms generated by PHP and want a "Reply" button on each of them, where it sends the content of the form via ajax to another php page, then can I use the same javascript snippet for all of these elements?
<form id="foo">
<label for="bar">A bar</label>
<input id="bar" name="bar" type="text" value="" />
<input type="submit" value="Reply" />
</form>
So if I do something like the following, then can I still handle all the responses individually and display the response ONLY on the element that "Reply" was clicked on?
$("#foo").submit(function(event){
$.ajax({
url: "/form.php",
type: "post",
data: serializedData,
// callback handler that will be called on success
success: function(response, textStatus, jqXHR){
// log a message to the console
console.log("Hooray, it worked only in the element it was clicked in!");
});
// prevent default posting of form
event.preventDefault();
});

Answer 1

If you want to handle all forms on the page, your code could work with minor changes.
$("form").submit(function(event){
$.ajax({
url: "/form.php",
type: "post",
// You have to have a way to retrieve the form data
data: getFormData(form),
success: function(response, textStatus, jqXHR){
console.log("Hooray, it worked only in the element it was clicked in!");
});
// prevent default posting of form or just return false
event.preventDefault();
});

Answer 2

No, there are multiple ways on submitting a form. You would want to change your first line to:
$("#replybutton").click(function(event){
Then you have to add that replybutton id to your button, and you'd have to explicitly list out the data elements in your ajax call. Also, the event.preventDefault() would be unnecessary. Come to think about it the whole <form> tags would be unnecessary as well.
There are other ways to do this using the form, but this is the simplest.