I have a slight problem when it comes to validating my radio buttons. What suppose to happen is that if none of the radio buttons have been selected then it should come up with a message stating “click a radio button’ and if a radio button is selected it should output the message ‘radio button ‘+ btnNum + ‘ was selected’.
Instead what it is doing is that no matter if a radio button is selected or not it always displays the message ‘click a radio button’. I have been trying to figure this out for ages but can’t seem to find a solution. Can you see where I have went wrong here so that the right message is displayed depending if a radio button is selected or not?.
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Create a Session</title>
<script type="text/javascript">
function validation() {
var errMsgContainerO = document.getElementById("radioAlert");
var btnRad1O = document.getElementsByName("SessionNo");
var isbtnRad1Checked = false;
for(i=0; i < btnRad1O.length; i++){
if(btnRad1O[i].checked){
isbtnRad1Checked = true;
var btnNum = i;
i = btnRad1O.length;
}
}
if(!isbtnRad1Checked) {
errMsgContainerO.innerHTML = 'Click a radio button';
} else {
errMsgContainerO.innerHTML = 'radio button '+ btnNum + ' was selected';
}
return false; //for demo purposes
}
</script>
</head>
<body>
<form action="create_session.php" method="post" name="sessionform">
<table>
<tr>
<th>2: Number of Sessions :</th>
<td class="sessionNo"><input type="radio" name="sessionNo" value="1" />1</td>
<td class="sessionNo"><input type="radio" name="sessionNo" value="2" />2</td>
<td class="sessionNo"><input type="radio" name="sessionNo" value="3" />3</td>
<td class="sessionNo"><input type="radio" name="sessionNo" value="4" />4</td>
<td class="sessionNo"><input type="radio" name="sessionNo" value="5" />5</td>
</tr>
</table>
<div id="radioAlert"></div>
</form>
</body>
You’re using “sessionNo” in the HTML, but “SessionNo” in the “getElementsByName()” call.