getting value from radio button using javaScript

Question

I'm trying to use Javascript to pass a value from a radio button to the next HTML page. However the Javascript I came up with seems to not able to access the radio buttons. Why?

HTML code:

<body>
<div id="frontContent">

        <p id ="levelContent">Levels: </p>
        <form id="levelSelection">
            <input type="radio" name="level" value="1" >Level 1</input>
            <input type="radio" name="level" value="2">Level 2</input>
        </form>

            <p id="startButton"><a href="index.html">Start</a></p>

        <p id ="scoreBoard">Highest Score: <span id="score">0</span></p>

</div>
</body>

Javascript code:

var radios = document.getElementsByName('level');
        alert(radios.length);
for (var i = 0, length = radios.length; i < length; i++) {
    if (radios[i].checked) {
        alert(radios[i].value);
        break;
    }
}

next html page?? you want to share data from one page to other?? — vinayakj, Jun 16 '15 at 16:22
yes i want to share data to other page, but my problem here is i cannot access the radio button on the same page. — ddd suman, Jun 16 '15 at 16:43

score 3 · Accepted Answer · edited Mar 09 '18 at 11:35

This code might help:

    <!DOCTYPE html>
<html>
<body>
<div id="frontContent">

        <p id ="levelContent">Levels: </p>
        <form id="levelSelection">
            <input type="radio" name="level" value="1" >Level 1</input>
            <input type="radio" name="level" value="2">Level 2</input>
        </form>

            <p id="startButton"><a href="index.html">Start</a></p>
<input type="button" onclick="clickButton()" value="clickMe"/> 
        <p id ="scoreBoard">Highest Score: <span id="score">0</span></p>

</div>
<script>
var radios = document.getElementsByName('level');
        alert(radios.length);
function clickButton(){
var radioVal = 0;
for (var i = 0, length = radios.length; i < length; i++) {
    if (radios[i].checked) {
        alert(radios[i].value);
        radioVal = radios[i].value;
        break;
    }
}
window.location.href= "index.html?radioValue="+radioVal;
}
</script>
</body>
</html>

must say I'm navigating on click of a button, but same could be mocked for a click on a link. On index.html page you can retrieve the value of radio button from URL params. — Sudhansu Choudhary, Jun 16 '15 at 16:37

score 0 · Answer 2 · answered Jun 16 '15 at 16:36

<div id="frontContent">

        <p id ="levelContent">Levels: </p>
        <form id="levelSelection">
            <input type="radio" onclick="checkRadio()" name="level" value="1"  >Level 1</input>
            <input type="radio" onclick="checkRadio()" name="level" value="2" checked='true'>Level 2</input>
        </form>

            <p id="startButton"><a href="index.html">Start</a></p>

        <p id ="scoreBoard">Highest Score: <span id="score">0</span></p>

</div>

<script>
     function checkRadio(){
        var radios = document.getElementsByName('level');
        alert(radios.length);
        for (var i = 0, length = radios.length; i < length; i++) {
          if (radios[i].checked) {
           alert(radios[i].value);
           callRedirect(radios[i].value);
           break;
         }
      }

    }

function callRedirect(selectedVal){
  window.location.href = "urlHTMLPageURL?radioOption="+selectedVal;
}    
</script>

If you want it on page load, then just call checkRadio() and it will do the rest. — Swaprks, Jun 16 '15 at 16:51

score 0 · Answer 3 · edited Mar 09 '18 at 11:36

0

If you are sending to another page, you must set the <form> tag with action and method, for example: method="get" action="index.html", and use a submit button instead of the link.

So, in the other page, you can get the value from query string.

edited Mar 09 '18 at 11:36

Ronan Boiteau

9,608
6
34
56

answered Jun 16 '15 at 16:39

Ricardo Pontual

3,749
3
28
43

Danny Delott · Answer 4 · 2015-06-16T16:27:23.000

Be sure to put your JavaScript at the end of the file, like this:

<body>
  <div id="frontContent">

        <p id ="levelContent">Levels: </p>
        <form id="levelSelection">
            <input type="radio" name="level" value="1" >Level 1</input>
            <input type="radio" name="level" value="2">Level 2</input>
        </form>

            <p id="startButton"><a href="index.html">Start</a></p>

        <p id ="scoreBoard">Highest Score: <span id="score">0</span></p>

  </div>

  <script>

    var radios = document.getElementsByName('level');
    alert(radios.length);
    for (var i = 0, length = radios.length; i < length; i++) {
      if (radios[i].checked) {
        alert(radios[i].value);
        break;
      }
    }
  </script>
</body>

It seems a bit pointless since you will never get to the `radios[i].checked` part. — putvande, Jun 16 '15 at 16:24

score -1 · Answer 5 · answered Jun 16 '15 at 16:26

Initially none of the radio option is selected. So the code doesn't enter the if block

http://jsfiddle.net/sez8c3xL/ check the fiddle for an example

<div id="frontContent">

        <p id ="levelContent">Levels: </p>
        <form id="levelSelection">
            <input type="radio" name="level" value="1"  >Level 1</input>
            <input type="radio" name="level" value="2" checked='true'>Level 2</input>
        </form>

            <p id="startButton"><a href="index.html">Start</a></p>

        <p id ="scoreBoard">Highest Score: <span id="score">0</span></p>

</div>

<script>

    var radios = document.getElementsByName('level');
        alert(radios.length);
for (var i = 0, length = radios.length; i < length; i++) {
    if (radios[i].checked) {
        alert(radios[i].value);
        break;
    }
}

</script>

This also seems pointless since the user can't select anything. — putvande, Jun 16 '15 at 16:28

score -1 · Answer 6 · edited Mar 09 '18 at 11:36

-1

Hello here is the working script to get the radio buttons' values:

<script>
    var elem = document.getElementById('levelSelection').elements;
    for(var i = 0; i < elem.length; i++)
    {
        if(elem[i].type =="radio" && elem[i].checked == true)
        {
           alert(elem[i].value);
        }
    }
  </script>

edited Mar 09 '18 at 11:36

Ronan Boiteau

9,608
6
34
56

answered Jun 16 '15 at 16:33

Luca

108
1
11

getting value from radio button using javaScript

6 Answers6

Linked