CODEWITHSUNDEEP
javascripthtml
Stefanija
Stefanija

Reputation: 1418

Value of radio button

This is my code:

    <script>
    function myFunction() {
        var x;
        x = document.getElementById("numb2").value;
        document.write(x);
    }
    </script>
    ***
    <body>
    <form>
            <input  id = "numb2" value = "Male" type="radio">Male
            <input   id = "numb2" value= "Female" type="radio">Female
    </form>
  </body>

The problem is that I'm getting 'Male' whatever I choose.

Upvotes: 1

Views: 38

Answers (3)

Fernando Juarez
Fernando Juarez

Reputation: 1

first you must add the radio buttons in a group, you can do that with the attribute "name". Let me show you how to do that.

<input type="radio" name="groupRadio" value="male">Male
<input type="radio" name="groupRadio" value="female">Female

Upvotes: 0

rajuGT
rajuGT

Reputation: 6414

Check this fiddle:

 <form>
        <input  name='sex' value = "Male" type="radio">Male
        <input  name='sex' value= "Female" type="radio">Female
 </form>

You must use name property to achieve this functionality and loop over all elements to check which radio element is selected, as shown in below code.

function myFunction() {
   var value = "NONE";
   var elems = document.getElementsByName("sex");
   for(var i = 0; i < elems.length; i++) {
       if(elems[i].checked) {
           value = elems[i].value;
           break;
       }
   }
   alert(value);
}

Upvotes: 1

Barmar
Barmar

Reputation: 782653

First, you need to create a button group by giving both buttons the same name. Then you can use querySelector to select the chosen element and get its value.

function myFunction() {
  var val = document.querySelector("[name=numb2]:checked").value;
  document.getElementById("output").innerHTML = val;
  }

document.getElementById("button").addEventListener("click", myFunction);
<input name = "numb2" value = "Male" type="radio">Male
<input name = "numb2" value = "Female" type="radio">Female
<div>
Chosen: <span id="output"></span>
  </div>
<button id="button">Click</button>

Upvotes: 1

Related Questions