CODEWITHSUNDEEP
javascript
Serena
Serena

Reputation: 27

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

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>

Upvotes: 1

Views: 2094

Answers (2)

benjarwar
benjarwar

Reputation: 1804

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

Upvotes: 1

B. Camp
B. Camp

Reputation: 29

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

 radio_value=radios[i].checked;

Upvotes: 1

Related Questions