Javascript: can't get radio value, it's always return null

Question

I'm having problem with getting radio button value. I search thru and follow instruction of the same issues in stackoverflow but doesn't help. I'd appreciate it if you can help:

The radio_value in the code below always return null.

 <!DOCTYPE HTML> <HTML> <HEAD> <TITLE>Template</TITLE> <script> function payment_validation(){ var radio_value=""; var radios=document.getElementsByName("payment"); for (var i=0;i<radios.length;i++){ if(radios[i].checked){ radio_value=radios[i].value; return radio_value; break; } } if(radio_value!=""){ document.getElementById("payment_error").innerHTML=""; return true; } else{ document.getElementById("payment_error").innerHTML="Please select radio"; return false; } } </script> </HEAD> <BODY> <p> Payment Options: <input type="radio" name="payment" id="CC" value="">CreditCard <input type="radio" name="payment" id="DC" value="">DebitCard <input type="radio" name="payment" id="PP" value="">Paypal <span style=color:red id= payment_error></span> </p> <p> <input type="button" id="submit_id" value=" SUBMIT " onclick="payment_validation()"> </p> </BODY> </HTML>

Answer 1

use .checked instead of .value. That should help and make it not NULL. so itv would be

 radio_value=radios[i].checked;

Answer 2

A few things:

You should try to format your JS with tab indentation so it's easier to read.
You really only need your payment_validation function to return true or false; so remove the line return radio_value , and instead just break .
Best practice says to comma separate your variable declarations at the top, rather than declaring var more than once.
You have an unclosed <p> tag.
There is no element with the payment_error id, so the code generates an error as is.
Your <span> tag is malformed; it is missing quotes around the attribute values and has a space before payment_error .

Altogether, now:

HTML:

<p>
  Payment Options:
  <input type="radio" name="payment" id="CC" value="CreditCard">CreditCard
  <input type="radio" name="payment" id="DC" value="DebitCard">DebitCard
  <input type="radio" name="payment" id="PP" value="Paypal">Paypal
</p>

<p>
  <input type="button" id="submit_id" value="   SUBMIT   " onclick="payment_validation()">
</p>

<p style="color: red;" id="payment_error"></p>

JS:

function payment_validation() {
    var radio_value = "",
        radios = document.getElementsByName("payment");

    for (var i = 0; i < radios.length; i++) {
        if (radios[i].checked) {
            radio_value = radios[i].value;
            break;
        }
    }

    if (radio_value != "") {
        document.getElementById("payment_error").innerHTML = "";
        return true;
    } else {
        document.getElementById("payment_error").innerHTML = "Please select radio";
        return false;
    }
}

Codepen: http://codepen.io/anon/pen/avXGeK

Javascript: can't get radio value, it's always return null

Question

2 answers

solution1
1 2015-11-17 00:15:05

solution2
1 ACCPTED 2015-11-17 00:16:08

Javascript: can't get radio value, it's always return null

Question

2 answers

solution1 1 2015-11-17 00:15:05

solution2 1 ACCPTED 2015-11-17 00:16:08

solution1
1 2015-11-17 00:15:05

solution2
1 ACCPTED 2015-11-17 00:16:08