Leahcim
Leahcim

Reputation: 41929

Two radio buttons share one "id"?

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"?

Upvotes: 19

Views: 70089

Answers (9)

Mr. Prakaxh
Mr. Prakaxh

Reputation: 1

Its working for me, i have used same id health in 2 inputs.

var health =$('input:radio[id=health]:checked').val();

Upvotes: 0

Md. Shafiqur Rahman
Md. Shafiqur Rahman

Reputation: 3058

If want to use pure javascript you have to use..

document.querySelector('input[name=radio_btn_name]');

but it need updated browser. Old browsers may result incorrect.

To overcome this issue, javascript library is to use (library will handle the issue). For this use the following..

$('input[name=radio_btn_name]:checked').val();

Upvotes: 2

Selvakumar Ponnusamy
Selvakumar Ponnusamy

Reputation: 5533

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

Upvotes: 4

nnnnnn
nnnnnn

Reputation: 150030

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().

Upvotes: 15

Rohan Patil
Rohan Patil

Reputation: 2348

Do not repeat id's.It is best practice to use only one id per page as it must be unique.You can group the radio buttons using name attribute.

use $('input[name=interview]') to get the value.

Upvotes: 1

Wasim Karani
Wasim Karani

Reputation: 8886

Instead of id="nick"

You can use name="nick"

Or

class="nick"

Upvotes: 0

Matthew
Matthew

Reputation: 15642

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]');.

Upvotes: 24

Trott
Trott

Reputation: 70075

The id assigned to an element must be unique within the document. So, no, you should not use the same id.

Upvotes: 0

xkeshav
xkeshav

Reputation: 54022

you must assign same name but different id to input type=radio because this is basic property of raido button that you need to select only one value from givel aal radio buttons.

but that id should not be assigned to other form elements

Upvotes: 0

Related Questions