How to get the value of a radio button with javascript

Question

I can not figure out how to get the value of a radio button.

I've tried everything except the right way. Here is an example here

OK, the first switch may not be the right way to use the switch stateemnt, although I like doing it this way since it is easy to read and add new options.

Alert statements display true or false. So then I tried an if statement. This did not work. Ok, maybe I must type out everything. Nope, this did not work either. Maybe it needs a numeral? Nope. String? Nope.

So I tried another switch. Nope again.

Can someone give me the proper way to do this please?

function commitData()
    {           
        switch (true) {
            case document.getElementsByName('StatusOnHeader')[0]:
                alert('Edit');
                break;
            case document.getElementsByName('StatusOnHeader')[1]:
                alert('Add');
                break;
            default:
                alert('XXX');
                break;
        } 
        if (document.getElementsByName('StatusOnHeader')[0]) {
            alert("TRUE");
        } else {
            alert("FALSE");
        }
        if (document.getElementsByName('StatusOnHeader')[0] == true) {
            alert("TRUE");
        } else {
            alert("FALSE");
        }
        if (document.getElementsByName('StatusOnHeader')[0] == 1) {
            alert("TRUE");
        } else {
            alert("FALSE");
        }
        if (document.getElementsByName('StatusOnHeader')[0] == '1') {
            alert("TRUE");
        } else {
            alert("FALSE");
        }
        switch (document.getElementsByName('StatusOnHeader')[0]) {
            case true:
                alert('Edit');
                break;
            case false:
                alert('Add');
                break;
            default:
                alert('XXX');
                break;
        } 
    }

You should look at [this](http://stackoverflow.com/questions/9618504/get-radio-button-value-with-javascript). — Amessihel, Apr 10 '15 at 20:11
In Javascript you need to loop through the buttons and look for the checked one. — Tim, Apr 10 '15 at 20:13
This is easy with jQuery and is explained [here][1] [1]: http://stackoverflow.com/questions/9618504/get-radio-button-value-with-javascript — vassago632, Apr 10 '15 at 20:15
@Amessihel: Thanks but I did look at that. I did not see the sense of creating another reference to the same object when I only needed to query the value once. — Joe, Apr 10 '15 at 20:24
@Joe: What do you mean by creating a reference ? The accepted answer shows a loop on the radio button set named `genderS`. Looping this way on your `StatusOnHeader` set will return the checked value, if any. — Amessihel, Apr 10 '15 at 20:34
@Amessihel if you look at the code you will see the loop does NOT reference genderS. It references radios which is additional memory, additional CPU, additional code. While it is true that this is trivial it is also true that in my case it is unnecessary. The solution DOES reference the **checked** property but I missed it due to all the other stuff it was doing. — Joe, Apr 14 '15 at 12:52

score 2 · Accepted Answer · answered Apr 10 '15 at 20:11

2

if(document.getElementsByName('StatusOnHeader')[0].checked)

answered Apr 10 '15 at 20:11

Sheldon Neilson

803
4
8

You are only checking the first radio button entry this way. – Amessihel Apr 10 '15 at 20:15
No, to check the radio button I'd have to assign something to the checked property. x = y, not if(x) – Sheldon Neilson Apr 10 '15 at 20:17
I mean : you're only checking if the first radio button is checked. – Amessihel Apr 10 '15 at 20:21
Well i think the OP can take this information and apply it to his problem. I'm sure he'll manage. – Sheldon Neilson Apr 10 '15 at 20:23
@Amessihel yes I was only checking the first button. First off this is only an example of a problem not the entire program. Secondly why should I code for the second button when my code for the first button does not work? Then I will have more broken code. I will code the second button AFTER I get the code for the first button to work. – Joe Apr 14 '15 at 12:55
@Joe : with a loop you can check what radio button is checked and then retrieve its value ("add", "edit", etc.). Better than write a switch-case statement (redundant code). – Amessihel Apr 14 '15 at 12:58

score 0 · Answer 2 · answered Apr 10 '15 at 20:15

0

Boolean Result (true / false)

var checkedOrNot = document.getElementsByName('StatusOnHeader')[0].checked;

String Result ('Checked', 'Not checked')

var result = (document.getElementsByName('StatusOnHeader')[0].checked)?'Checked':'Not Checked';

answered Apr 10 '15 at 20:15

Downgoat

13,771
5
46
69

score 0 · Answer 3 · answered Apr 10 '15 at 21:29

switch (true) {...}

true is not a variable; insert here a variable

case variable: ...

variable is unusual; mostly constants are used here

document.formName.inputRadio[0..n].checked

returns false or true

getElementsByID()

is unknown. the id is unique and so the method is getElementById()

and now the answer:

<form action="" name="chooseAFormName">
    <input type="radio" name="StatusOnHeader" value="Edit">Edit existing
    <input type="radio" name="StatusOnHeader" value="Add" checked="checked">Add new
    <input type="submit" name="send_button" value="Save" onclick='commitData()'>
</form>

script part:

function commitData() {
    if (document.chooseAFormName.StatusOnHeader[0].checked) {
        alert('first radio checked!');
        // insert here valuable stuff
    }
    if (document.chooseAFormName.StatusOnHeader[1].checked) {
        alert('second radio checked!');
        // insert here valuable stuff as well
    }
}

How to get the value of a radio button with javascript

3 Answers3