812825 - Javascript unable to retrieve radio button value

Status: RESOLVED WORKSFORME

(Firefox :: Untriaged, defect)

Description

[tristan.wh33t]

Attachment: Failed_javascript.html

User Agent: Mozilla/5.0 (Windows NT 5.1; rv:16.0) Gecko/20100101 Firefox/16.0
Build ID: 20121024073032

Steps to reproduce:

Trying to do a simple Javascript call to discover the selected value of a radio button.




Actual results:

Check out this page here: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_radio_value

That's essentially the exact same thing I'm trying to do. Have a radio button array hold three different values. Then during an onclick or onchange event I want to simply retrieve the value of the selected element in the radio button array. As you can see from the link I've posted it always reports Red, even when no radio button has been selected or blue or green is selected.


Expected results:

It should be retrieving what ever value is selected in the radio button array.

Comment 1

[Mardeg]

Attachment: Testcase: alert selected radio button onchange

Neither the original attachment nor the code in the link given in comment 0 are correct for doing the desired behaviour. The code in this attachment is one correct method of doing it, and the following line in http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_radio_value 

var x=document.getElementById("red").value;

needs to be changed to the following to do the correct thing:

var x=document.querySelector('input[name="colors"]:checked').value;

Comment 2

[Mardeg]

Resolving per comment 1

Comment 3

[tristan.wh33t]

(In reply to Mardeg from comment #1)
> Created attachment 682818 [details]
> Testcase: alert selected radio button onchange
> 
> Neither the original attachment nor the code in the link given in comment 0
> are correct for doing the desired behaviour. The code in this attachment is
> one correct method of doing it, and the following line in
> http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_radio_value 
> 
> var x=document.getElementById("red").value;
> 
> needs to be changed to the following to do the correct thing:
> 
> var x=document.querySelector('input[name="colors"]:checked').value;

Thank you. I was not aware that's how it's supposed to be done now. I have been using the method in Comment 0 for a long time and it has worked. I will use the technique you supplied. Is there any way I can look up what is the "right" and wrong way to do things like this?

Comment 4

[tristan.wh33t]

(In reply to tristan.wh33t from comment #3)
> (In reply to Mardeg from comment #1)
> > Created attachment 682818 [details]
> > Testcase: alert selected radio button onchange
> > 
> > Neither the original attachment nor the code in the link given in comment 0
> > are correct for doing the desired behaviour. The code in this attachment is
> > one correct method of doing it, and the following line in
> > http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_radio_value 
> > 
> > var x=document.getElementById("red").value;
> > 
> > needs to be changed to the following to do the correct thing:
> > 
> > var x=document.querySelector('input[name="colors"]:checked').value;
> 
> Thank you. I was not aware that's how it's supposed to be done now. I have
> been using the method in Comment 0 for a long time and it has worked. I will
> use the technique you supplied. Is there any way I can look up what is the
> "right" and wrong way to do things like this?

Comment 5

[Mardeg]

(In reply to tristan.wh33t from comment #3)
> Thank you. I was not aware that's how it's supposed to be done now. I have
> been using the method in Comment 0 for a long time and it has worked. I will
> use the technique you supplied. Is there any way I can look up what is the
> "right" and wrong way to do things like this?

Sure, the .checked boolean value I used in the attachment is covered along with others at https://developer.mozilla.org/en-US/docs/DOM/HTMLInputElement
and the :checked CSS selector I used in the comment is covered at
https://developer.mozilla.org/en-US/docs/CSS/:checked

You can also always use an IRC client to ask more questions in the irc://irc.mozilla.org/js channel to help determine if something is a bug or not before filing in bugzilla.