I want to submit only single form from the huge volume of forms on the same page, the one I clicked on submit button.
HTML:
<form id='foo'>
<input type=radio name='1' value='Y'>
<input type='submit' id='submit' value='Send' />
</form>
<form id='foo'>
<input type=radio name='2' value='Y'>
<input type='submit' id='submit' value='Send' />
</form>
...
<form id='foo'>
<input type=radio name='20000' value='Y'>
<input type='submit' id='submit' value='Send' />
</form>
AJAX DOM
$(document).ready(function() {
$('form#foo').submit(function(e){
e.preventDefault(); // prevents the default action (in this case, submitting the form)
$.post(
'ajax.php',
$('form#foo').serialize()
);
return false;
});
});
Unfortunately it posts ALL data from ALL forms at ones, how could I escape from the static form name 'foo' and static parameter $('form#foo'). ? Could $(this). be helpful?
You can't use the same id more than once. try this..
<form class='foo'>
<input type=radio name='1' value='Y'>
<input type='submit' value='Send' />
<form class='foo'>
<input type=radio name='2' value='Y'>
<input type='submit' value='Send' />
...
<form class='foo'>
<input type=radio name='20000' value='Y'>
<input type='submit' value='Send' />
Javascript
$(document).ready(function() {
$('form.foo').submit(function(e){
e.preventDefault();
//get the data from this form.
var formData = $(this).serialize();
$.post(
'ajax.php',
formData
);
return false;
});
});