formCheck on radiobuttons? 2

[sam1981]

I've created a form and used formcheck to ensure that users enter the required fields. This works fine for text fields, but it doesn't seem to work for the radiobuttons.

I assume it's something very simple that I'm doing wrong.

This is the section of the javascript that isn't working:

<script language="javascript">
<!--
function formCheck()
{

if (document.theform.RadioGroup1.value == "")
{
alert("Please select an answer.");
document.theform.RadioGroup1.focus();
return false;
}



and this is the piece of the form it refers to:


<label>
<input type="radio" name="RadioGroup1" value="Sydney">
Sydney</label>
&nbsp;&nbsp;
<label>
<input type="radio" name="RadioGroup1" value="Melbourne">
Melbourne</label>
&nbsp;&nbsp;
<label>
<input type="radio" name="RadioGroup1" value="Brisbane">
Brisbane</label>

Could anyone point me in the right direction?

 

[LFI]

Radio buttons are funny beasts. It would be nice if they behaved the way you expected (as evidenced by the code you posted). That would certainly make their use more consistent with other INPUT types. Alas...

The way to deal with radio buttons is to cycle through the buttons and check to see if one is checked. Sample code is as follows:

var oneChosen = false;
for(var i=0; i<document.theform.RadioGroup1.length; i++)
{
 if(document.theform.RadioGroup1[i].checked)
 {
  oneChosen = true;
  break;
 }
}

if (!oneChosen)
{
 alert("Please select an answer.");
 document.theform.RadioGroup1.focus();
 return false;
}

'hope that helps!

--Dave

 

[sam1981]

OK cheers for that, that's really helpful.

Seems to be working now except for one thing, despite the fact that the messenger box comes up to tell you to select an answer, the form still submits...

 

[LFI]

In your FORM tag, include:

<form name='theform' onsubmit='[b]return[/b] formcheck()'>

Is that where you're calling formcheck() from? If so, that might do it for you.

Let us know!

--Dave

 

[sam1981]

Yeah, I am using return.

The other text fields don't submit the form, just the radiobutton one which is a bit odd.

 

[sam1981]

If it helps, heres the Javascript in full:

<script language="javascript">
<!--
function formCheck()
{

var oneChosen = false;
for(var i=0; i<document.theform.RadioGroup1.length; i++)
{
if(document.theform.RadioGroup1.checked)
{
oneChosen = true;
break;
}
}

if (!oneChosen)
{
alert("Please select an answer.");
document.theform.RadioGroup1.focus();
return false;
}

if (document.theform.firstname.value == "")
{
alert("Please enter your firstname.");
return false;
}

if (document.theform.surname.value == "")
{
alert("Please enter your surname.");
document.theform.surname.focus();
return false;
}

if (document.theform.email.value.indexOf("@") == -1 ||
document.theform.email.value == "")
{
alert("Please enter a valid email address.");
return false;
}

if (document.theform.phone.value == "")
{
alert("Please enter your phone number.");
document.theform.phone.focus();
return false;
}

if (document.theform.address1.value == "")
{
alert("Please enter your address.");
document.theform.address1.focus();
return false;
}

if (document.theform.town.value == "")
{
alert("Please enter your Town/City.");
document.theform.town.focus();
return false;
}

if (document.theform.postcode.value == "")
{
alert("Please enter your postcode.");
document.theform.postcode.focus();
return false;
}

}
//-->
</script>

 

[LFI]

Can you post the HTML for the form?

Also, I'm curious what happens when you have no value entered for the e-mail address. Does formcheck() work correctly?

--Dave

 

[sam1981]

<table width="600" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td height="161" colspan="5" valign="top"><img src="images/comp-banner-top.jpg" width="600" height="161"></td>
</tr>
<tr>
<td width="74" height="19">&nbsp;</td>
<td width="160">&nbsp;</td>
<td width="122">&nbsp;</td>
<td width="160">&nbsp;</td>
<td width="84"></td>
</tr>
<tr>
<td height="29" colspan="5" valign="top"><div align="center"><font color="#663399" size="5" face="Arial, Helvetica, sans-serif"><strong><strong></font></div></td>
</tr>
<tr>
<td rowspan="7" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
<td height="12"></td>
<td></td>
<td></td>
<td rowspan="7" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr>
<td height="67" colspan="3" valign="top"><font size="2" face="Arial, Helvetica, sans-serif">Win!</font></td>
</tr>
<tr>
<td height="17"></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="676" colspan="3" valign="top"><form name="theform" method="post" action="mail.asp" onSubmit="return formCheck()">
<table width="100%" cellpadding="5">
<tr>
<td bgcolor="#f1f1f1"><font size="3" face="Arial, Helvetica, sans-serif"><strong>Fill
in all of the fields below:</strong></font></td>
</tr>
<tr>
<td height="81" bgcolor="#CCCCCC"> <p><font size="3" face="Arial, Helvetica, sans-serif"><strong>Which
city plays host to the Australian Open in 2005?</strong></font><br>
<br>
<strong><font size="2" face="Arial, Helvetica, sans-serif">
<label>
<input type="radio" name="RadioGroup1" value="Sydney">
Sydney</label>
&nbsp;&nbsp;
<label>
<input type="radio" name="RadioGroup1" value="Melbourne">
Melbourne</label>
&nbsp;&nbsp;
<label>
<input type="radio" name="RadioGroup1" value="Brisbane">
Brisbane</label>
</font></strong></p></td>
</tr>
<tr>
<td height="520"> <p align="left"><strong><font size="3" face="Arial, Helvetica, sans-serif">Please
tell us your details:<br>
<br>
</font></strong><strong><font size="2" face="Arial, Helvetica, sans-serif">First
Name <br>
<input type="text" name="firstname" id="firstname6" size="71">
</font></strong></p>
<p align="left"><strong><font size="2" face="Arial, Helvetica, sans-serif">Surname
<br>
<input name="surname" type="text" id="surname6" size="71">
</font></strong></p>
<p align="left"><strong><font size="2" face="Arial, Helvetica, sans-serif">
e-mail address <br>
<input name="email" type="text" id="email6" size="71">
</font></strong></p>
<p align="left"><strong><font size="2" face="Arial, Helvetica, sans-serif">
Phone number <br>
<input name="phone" type="text" id="phone6" size="71">
</font></strong></p>
<p align="left"><strong><font size="2" face="Arial, Helvetica, sans-serif">
Address <br>
<input name="address1" type="text" id="address16" value="" size="71">
</font></strong></p>
<p align="left"><strong><font size="2" face="Arial, Helvetica, sans-serif">
Town/City <br>
<input name="town" type="text" id="town6" size="71">
</font></strong></p>
<p align="left"><strong><font size="2" face="Arial, Helvetica, sans-serif">
Postcode <br>
<input name="postcode" type="text" id="postcode6" size="71">
</font></strong></p>
<p align="left"><font size="1" face="Arial, Helvetica, sans-serif">If
you would like to know more please tick here
<input type="checkbox" name="checkbox" value="Yes, please contact me.">
<br>
<br>
Alternatively, if you would not like to
anymore info ,please tick here</font> <font size="1">
<input type="checkbox" name="checkbox2" value="No thanks, do not contact me.">
</font><font size="1"> </font> </p></td>
</tr>
<tr>
<td><p align="left">
<input type="submit" name="Submit" value="submit">
</p></td>
</tr>
</table>
</form></td>
</tr>
<tr>
<td height="15"></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="146" valign="top"><img src="images/Tourism-Victoria-Logo.gif" width="160" height="146"></td>
<td>&nbsp;</td>
<td valign="middle"><img src="images/qantas.gif" width="160" height="38"></td>
</tr>
<tr>
<td height="110"></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="36"></td>
<td></td>
<td></td>
<td></td>
<td>&nbsp;</td>
</tr>
</table>

 

[sam1981]

The formcheck works correctly for me when not entering anything in the email address (works when you don't have an '@' symbol in there too.

I'm using IE6 BTW.

 

[LFI]

Thanks. That helped (all the code).

I think I found the problem. You don't realize it, but you're getting a JavaScript error on the line:

document.theform.RadioGroup1.focus();

...but the form continues on its way. It skips the 'return false' because of the error, which is why it submits anyway.

Try this instead:

document.theform.RadioGroup1[0].focus();

See if that works.

--Dave

 

[sam1981]

Dave, you're a genius!

Thanks for helping out a JavaScript newbie.