Question

Problem:

Determine which radio button was sent based on their order and submit the value with PHP.

HTML table 1 code:

<table class="table table-bordered neutralize" id="itembuttons">
    <thead>
        <tr>
            <th><input type="radio" name="3" id="3" value="6"></th>
            <th><input type="radio" name="3" id="3" value="7"></th>
            <th><input type="radio" name="3" id="3" value="8"></th>
            <th><input type="radio" name="3" id="3" value="9"></th>
            <th><input type="radio" name="3" id="3" value="10"></th>
        </tr>
    </thead>
</table>

HTML table 2 code:

<table class="table table-bordered neutralize" id="itembuttons">
    <thead>
        <tr>
            <th><input type="radio" name="3" id="3" value="11"></th>
            <th><input type="radio" name="3" id="3" value="12"></th>
            <th><input type="radio" name="3" id="3" value="13"></th>
        </tr>
    </thead>
</table>

Scenario:

The above code will generate a POST variable in PHP called “3” that will have a value between 6 and 10 in Table 1 or 11 and 13 in Table 2. However, I would like jQuery to determine which button was actually chosen. So for instance, if I choose 3rd button (value=8 or value=13)) then the value 3 should be sent in a hidden input field. If the 5th button was chosen (value=10) then the value 5 should be sent in a hidden input field.

Answer 1

Try this – http://jsfiddle.net/Xa42c/

$("input[type=radio]").on("click", function(e) {
    $("input[type=hidden]").val( $(this).val() );

    alert( "Hidden field value is set to " + $(this).val() );
});​

Note that you don’t need the id-s. But if you want to use them they must be unique

UPDATE To get position use index() – http://jsfiddle.net/Xa42c/2/

$("input[type=radio]").on("click", function(e) {
    var index = $("input[type=radio]").index(this) + 1;
    $("input[type=hidden]").val( index );

    alert( "Hidden field value is set to " + index );
});​