jQuery单选按钮提交表单

Question

I have multiple forms on one page all are like this: The ID value changes but the options can be similar.

<form class="test"><td>4000</td>
<td align='center'><input type='radio' name='radio' value='car' checked></td>
<td align='center'><input type='radio' name='radio' value='boat' ></td>
<td align='center'><input type='radio' name='radio' value='Plane' ></td>
<input type='hidden' name='id' value='4000'/>
<input type='hidden' name='location' value='local'/>
<div class="form" style="display: none;">
</div></form>

Using JQuery I'm trying to submit this when any of the 3 radio buttons are selected.

<script>
$("input[name='radio']").click(function() {
    var CurrectForm=$(this).parents('.test:first');
    $.post(
        'do.php',
        CurrectForm.serialize(),
        function( response ) {
            CurrectForm.find('#form').html( response );
               show( response );
        }
    );
} );
</script>

I've used similar to the above with checkboxes and dropdown lists, which have worked fine. But this doesn't seem to submit the values to the do.php page. The values that are submitted are show in the div form. Doing a var_dump($_POST); results in an empty array.

Can someone point me in the right direction ? Thanks

Changing the form ti this seems to work ?

<td><form class="test">
<input type='radio' name='radio' value='car' checked>
<input type='radio' name='radio' value='boat' >
<input type='radio' name='radio' value='Plane' >
<input type='hidden' name='id' value='4000'/>
<input type='hidden' name='location' value='local'/>
<div class="form" style="display: none;">
</div></form></td>

Why does changing the cause it to work ?

Jfiddle with working example :) http://jsfiddle.net/QvpH5/

Answer 1

My guess is that there are multiple forms on your page with the class test . What is happening, is when you use parents() , you don't realize it first finds all of the ancestors , and then searches for .test:first . This will return the very first form's values, regardless of which form is clicked.

Look at this jsFiddle to see the fix (change .parents to .parent): http://jsfiddle.net/SDzzr/