19

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

Mark Schultheiss
  • 32,614
  • 12
  • 69
  • 100
Leahcim
  • 40,649
  • 59
  • 195
  • 334
  • Elements cannot share an id. It leads to unexpected behavior, in particular when using javascript. – mrtsherman Nov 29 '11 at 04:47
  • 1
    name of the radio buttons could be same not the id so you can try like this **var inputUser = $(":input[name=interview]:checked").val();** for selected radio button value** – Punit Nov 29 '11 at 05:30
  • Please reference the HTML 4.01 specification where it says duplicate id's are not allowed and has not changed since that 1999 spec. http://www.w3.org/TR/REC-html40/ – Mark Schultheiss Jul 22 '13 at 16:00

9 Answers9

24

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

Matthew
  • 15,282
  • 27
  • 88
  • 123
  • thanks, I'm a newbie, please confirm that the whole line where I assign the value will look like this: var inputUser = $('input[name=interview]'); – Leahcim Nov 29 '11 at 04:53
  • @Michael, right, the jQuery selector right there will get all inputs with "name" set to "interview". inputUser will store this jQuery object. – Matthew Nov 29 '11 at 05:18
  • I'm trying this but it's telling me the variable is undefined http://stackoverflow.com/questions/8320980/how-to-figure-out-where-this-database-insertion-and-retrieval-is-breaking – Leahcim Nov 30 '11 at 04:43
  • I was trying to find radio buttons having same id "AMCRadio". After learning this comment i changed both id and voila i got uniquely identified radio buttons. And thus was able to fetch `$("#AMCRadio1").is(":checked")` – Sorangwala Abbasali Dec 27 '16 at 10:10
15

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

nnnnnn
  • 147,572
  • 30
  • 200
  • 241
4

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();
Selvakumar Ponnusamy
  • 5,363
  • 7
  • 40
  • 78
  • I tried your solution but it's telling me the variable is undefined. http://stackoverflow.com/questions/8320980/how-to-figure-out-where-this-database-insertion-and-retrieval-is-breaking – Leahcim Nov 30 '11 at 04:39
2

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();
Md. Shafiqur Rahman
  • 2,878
  • 27
  • 24
1

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.

Rohan Patil
  • 2,328
  • 1
  • 16
  • 23
0

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

var health =$('input:radio[id=health]:checked').val();
vimuth
  • 5,064
  • 33
  • 79
  • 116
Mr. Prakaxh
  • 1
  • 1
0

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

xkeshav
  • 53,360
  • 44
  • 177
  • 245
0

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

Trott
  • 66,479
  • 23
  • 173
  • 212
0

Instead of id="nick"

You can use name="nick"

Or

class="nick"
Wazy
  • 8,822
  • 10
  • 53
  • 98
  • so this would work? var inputUser = $(".nick"); with the [.] representing the class? – Leahcim Nov 29 '11 at 04:54
  • @Michael Ya that would work `$(".nick")` with `$.each()`... You can get all the values with this....Better way is by name `$('input[name=nick]')` will give you the selected value.... – Wazy Nov 29 '11 at 04:59