PDA

View Full Version : simple radio box reference

oat
02-07-2003, 04:52 PM
Hi folks,
I am stumped, there is something painfully simple going wrong here, and i cant see it. I will feel like a fool when somebody points it out to me :o

anyway, i am just trying to reference a radio button in a form. And its not working. Heres the code:


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function VerifyData()
{

var test=0;
var test=document.payform.package.value;
window.alert(test);
return true

}
</script>
</head>

<body>
<form name="payform" onSubmit="return VerifyData()" method=POST>
<table border="1" cellpadding="0" cellspacing="0" width="460">
<tr>
<td width="82" style="border-left-style: solid; border-top-style: solid"><font face="Arial" color="#666666" size="2"><b>Package</b></font></td>
<td width="102" style="border-left-style: solid; border-top-style: solid"><font face="Arial" color="#666666" size="2"><b>No.
of Units</b></font></td>
<td width="87" style="border-left-style: solid; border-top-style: solid"><font face="Arial" color="#666666" size="2"><b>Cost
(£)</b></font></td>
<td width="179" style="border-left-style: solid; border-top-style: solid"><font face="Arial" color="#666666" size="2"><b>Cost
($USD and Euro)</b></font></td>
</tr>
<tr>
<td width="82" style="border-left-style: solid; border-top-style: solid"><font face="Arial" color="#666666" size="2">
<input type="radio" name="package" value="1" CHECKED>
</font></td>
<td width="102" style="border-left-style: solid; border-top-style: solid"><font face="Arial" color="#666666" size="2">5</font></td>
<td width="87" style="border-left-style: solid; border-top-style: solid"><font face="Arial" color="#666666" size="2">7.99&nbsp;</font></td>
<td width="179" style="border-left-style: solid; border-top-style: solid"><font face="Arial" color="#666666" size="2">16.99</font></td>
</tr>
<tr>
<td width="82" style="border-left-style: solid; border-top-style: solid">
<input type="radio" name="package" value="2"></td>
<td width="102" style="border-left-style: solid; border-top-style: solid"><font face="Arial" color="#666666" size="2">10</font></td>
<td width="87" style="border-left-style: solid; border-top-style: solid"><font face="Arial" color="#666666" size="2">12.99&nbsp;</font></td>
<td width="179" style="border-left-style: solid; border-top-style: solid"><font face="Arial" color="#666666" size="2">21.99</font></td>
</tr>
<tr>
<td width="82" style="border-left-style: solid; border-top-style: solid">
<input type="radio" name="package" value="3"></td>
<td width="102" style="border-left-style: solid; border-top-style: solid"><font face="Arial" color="#666666" size="2">25</font></td>
<td width="87" style="border-left-style: solid; border-top-style: solid"><font face="Arial" color="#666666" size="2">29.99&nbsp;</font></td>
<td width="179" style="border-left-style: solid; border-top-style: solid"><font face="Arial" color="#666666" size="2">49.99</font></td>
</tr>
</table>

<input type="submit">
</form>

</body>
</html>


any help would be v appreciated

oat
arnyinc
02-07-2003, 05:25 PM
Radio buttons are odd. You can't just access the value of the group of radio buttons. You have to loop through to see which one is checked, then get its value.

Don't forget that you don't have to verify radio buttons if you specify one of them to be checked to begin with. The user has to select one of them. If you want to do further verification, then this is still helpful.


<html>
<head>
<script language="javascript">
function set_dd(myform){
for (var i=0; i<myform.myradio.length; i++)
if (myform.myradio[i].checked)
alert(myform.myradio[i].value)
}
</script>
</head>
<body>
<form name="url_form" method="get" action="buh.htm">
<input type="radio" name="myradio" value="1">1<br>
<input type="radio" name="myradio" value="2">2<br>
<input type="radio" name="myradio" value="3">3<br>
<input type="radio" name="myradio" value="4">4<br>
<input type="button" onclick="set_dd(this.form);">
</form>


</body>
</html>


That would change your function to something like this

function VerifyData()
{
for (var i=0; i<document.payform.package.length; i++)
if (document.payform.package[i].checked)
alert(document.payform.package[i].value)

return true
}
whammy
02-08-2003, 12:11 AM
A basic example using "best practices" from what I've gathered from the experts here (not really having to do with your specific problem, but radio buttons in general):


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Radios</title>
<script type="text/javascript">
<!--
function checkAnswer(radios) {
var checkflag = false;
var i = 0;
var radlen = radios.length;
while (i < radlen && !checkflag) {
if (radios[i].checked) checkflag = true;
i++;
}
if(checkflag != true) alert('Please choose an answer!');
return checkflag;
}
// -->
</script>
</head>
<body>
<div>
<form id="blah" action="radios.htm" onsubmit="return checkAnswer(this.answer)">
<input type="radio" name="answer" value="1" />1<br />
<input type="radio" name="answer" value="2" />2<br />
<input type="radio" name="answer" value="3" />3<br />
<input type="radio" name="answer" value="4" />4<br />
<input type="radio" name="answer" value="5" />5<br />
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>
oat
02-08-2003, 01:10 AM
thanks :thumbsup:

yep arnyinc, that works perfectly..

thx again

oat