YA Submitting Multiple Forms with AJAX Post - ajax

Question

I searched high & low, found a ton of near hits, and yet still searching for an answer.
Consider basic scenario:
<form id="id1" onsubmit="return submit_add2cart();" >
<script>
function submit_add2cart() {
$.ajax
({
type:'POST',
url: 'ajax.pl',
data:$('id1').serialize(),
success: function(response) {
alert(response);
}}
);
return false;
}
</script>
Now, let's say I have multiple forms on same page that want to call same submit_add2cart() function; submit_add2cart() should only process calling form.
<form id="id1" onsubmit="return submit_add2cart();" >
<form id="id2" onsubmit="return submit_add2cart();" >
<form id="id3" onsubmit="return submit_add2cart();" >
What would the code look like for submit_add2cart()?
Thank you,
Michael

Answer 1

Add forms with action attribute, which is compulsory and add a class, say ajax-submit:
<form id="id1" action="ajax.pl" class="ajax-submit">
<form id="id2" action="ajax.pl" class="ajax-submit">
<form id="id3" action="ajax.pl" class="ajax-submit">
Now, using jQuery's unobtrusive method to bind the submit action:
$(function () {
$(".ajax-submit").submit(function () {
$.post($(this).attr("action"), $(this).serialize(), function (response) {
alert(response);
});
return false;
});
});
You don't need a separate function, or three different methods for it. Only the form that gets submitted will be submitted along its own data and not others'.