Ajax巨大的Multiform提交

Question

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?

Answer 1

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;
    });

});