I have a set of HTML form links which I am submitting upon click which have the id "ajaxForm"
for ($year = 2008; $year <= intval(date('Y')); $year++) {
if ($year == $currentYear)
continue;
echo '<div style="float:right;padding-right:20px;"><form name="year' . $year . 'Form1" id= "ajaxForm" action="/managementDashboard#visibleTab-5" method="post"><input name="getRecordsFor" type="hidden" value="' . $year . '"><a id="buttonRed" href="javascript:document.year' . $year . 'Form1.submit();">' . $year . '</a></form></div>' . chr(10);
}
However instead of default submission I use jQuery to post the data with this:
jQuery("form#ajaxForm").click(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* Send the data using post and put the results in a div */
jQuery.post( '/ajaxFunctions?mgmtDbrdPge=5', jQuery("#ajaxForm").serialize(),
function( data ) {
jQuery( "#visibleTab-5" ).empty().append( data );
}
);
});
The problem is that it is submitting ALL the forms instead of the individual one I click. Is there a way I can prevent this without having to write jQuery link for each individual form?
UPDATE - I accepted one of the answers because his method is legitimate but I realized what my issue was. Instead of jQuery("#ajaxForm").serialize(), I should have had it written as jQuery(this).serialize() to only call upon the data that was submitted with the click instead of ALL the forms with that id.