Two radio buttons share one "id"?

Question

I'm borrowing/adapting this simple html/javascript form set up to put some data in the database. The original code uses text fields in the form, but I'm using radio buttons. The first three steps below are the original, and my question comes after...namely, do I give the radio buttons the same id...Hope this is clear...

Step 1. User enters value into form with id "nick"

<tr>  
    <td><label>User</label></td>  
    <td><input class="text user" id="nick" type="text" MAXLENGTH="25" /></td>  
</tr>  

Step 2. Value associated with id "nick" assigned to variable using id

var inputUser = $("#nick");  

Step 3. getting the value from the variable for insertion into database...

if(inputUser.attr("value")

but if it's two "radio buttons" rather than one "text" field....

<td><label>Interview</label></td>  
<td><input type="radio" name="interview" id="nick" value="pass" />Pass</td>
<td><input type="radio" name="interview" id="nick" value="fail" /> Fail</td>

Do I give the radio buttons the same "id" so that it's still like this when I assign the value to the variable...

var inputUser = $("#nick"); 

so that whichever button is checked will be assigned found in the id "nick"?

Answer 1

No, an Id attribute should always be unique. If you're using jQuery (looks like you are), you can select it with $('input[name=interview]');.

Answer 2

Since you are using jQuery you can easily get the value of the selected radio button by using the :checked selector:

$("input[name=interview]:checked").val()

You should definitely not give more than one element the same ID (that's invalid HTML and will lead to confusing bugs in your JavaScript), but even if that worked it wouldn't help in this case since radio buttons as a group don't have a selected value: you need to determine which one is currently checked and then get its value as shown above. (This is not a problem when getting the value on the webserver when the form is actually submitted, because only the value from the checked radio gets submitted.)

Note also that in your original code where you said inputUser.attr("value"), you could've said inputUser.val().

Answer 3

ID Attribute is unique across the page. You should have different Ids for each radio button. Use below code to get the input value.

var inputUser=$('input:radio[name=interview]:checked').val();