PDA

View Full Version : validate that radio buttons are selected



gamer12223
Oct 17th, 2009, 05:55 AM
Hey everyone, I cant seem to get this submitForm Validator to work. It needs to see if one of the two radio buttons are selected. I just cant seem to get it to work, anyone know whats wrong? Thanks.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Concert</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
<script type="text/javascript">
/* <![CDATA[ */
function setFormFocus() {
document.forms[0].visitor_name.focus();
}

function validateIt() {
if(document.forms[0].visitor_name.value == ""
|| document.forms[0].phone.value ==""
|| document.forms[0].email.value ==""
|| document.forms[0].area.value ==""
|| document.forms[0].feet.value ==""
|| document.forms[0].bedrooms.value ==""
|| document.forms[0].price.value ==""){

window.alert("You must enter enter information in all text boxes");
return false;
}
function submitForm(){
var radioSelected = false;
for (var i=0; i<5; ++i) {
if (document.forms[0].contactHow[i].checked == true) {
radioSelected = true;
break;
}
if (radioSelected == false){
window.alert("you");
return false;
}
else
return true;
}
}
}
/* ]]> */
</script>


</head>
<body onload="setFormFocus();">
<h1>Real Estate Inquiry</h1>
<form action="FormProcessor.html" method="get" onsubmit="return validateIt(); onsubmit="return submitForm();"
enctype="application/x-www-form-urlencoded">
<p>Name<br />
<input type="text" name="visitor_name" size="50" value="Enter your name" onclick="if (this.value == 'Enter your name') this.value = '';" /></p>
<p>E-mail address<br />
<input type="text" name="email" size="50" value="Enter your e-mail address" onclick="if (this.value == 'Enter your e-mail address') this.value = '';" /></p>
<p>Phone<br />
<input type="text" name="phone" size="50" value="Enter your phone number" onclick="if (this.value == 'Enter your phone number') this.value = '';" /></p>
<p>Area of town<br />
<input type="text" name="area" size="50" value="What are of town are you interested in?" onclick="if (this.value == 'What are of town are you interested in?') this.value = '';" /></p>

<p>Property <select name="property_type">
<option value="unselected">Select a Property Type</option>
<option value="condo">Condos</option>
<option value="single">Single Family Homes</option>
<option value="multi">Multifamily Homes</option>
<option value="mobile">Mobile Homes</option>
<option value="land">Land</option>
</select>
Sq. feet <input type="text" name="feet" size="5" value="???" onclick="if (this.value == '???') this.value = '';" /> </p>
<p>Bedrooms <input type="text" name="bedrooms" size="5" value="???" onclick="if (this.value == '???') this.value = '';" /> </p>
Maximum price <input type="text" name="price" size="12" value="???" onclick="if (this.value == '???') this.value = '';" /> </p>
<p>How should we contact you? <input type="radio" name="contactHow"value="call_me" /> Call me
<input type="radio" name="contactHow" value="e-mail_me" />
E-mail me</p>
<p><input type="submit" /></p>
</form>




</body>
</html>

Old Pedant
Oct 17th, 2009, 07:08 AM
Well, first of all, you can't have *TWO* onsubmit event handlers for the <form>!!!

onsubmit="return validateIt(); onsubmit="return submitForm();"

Make up your mind, which one will you use???

And then, in the code where you are looking for a checked radio button, you do:


for (var i=0; i<5; ++i)
{
if (document.forms[0].contactHow[i].checked == true)
{

But since you only have 2 radio buttons, as soon as you try to do

if (document.forms[0].contactHow[2].checked == true) {

you get an error--which you are of course ignoring--and that means that the function just returns junk to the onsubmit and so the submit takes place.

Old Pedant
Oct 17th, 2009, 07:13 AM
How about if we K.I.S.S.??



function validateIt(form)
{
if ( form.visitor_name.value == ""
|| form.phone.value ==""
|| form.email.value ==""
|| form.area.value ==""
|| form.feet.value ==""
|| form.bedrooms.value ==""
|| form.price.value =="")
{
alert("You must enter enter information in all text boxes");
return false;
}
if ( ! form.contactHow[0].checked && ! form.contactHow[1].checked )
{
alert("You must check a radio button to tell us how to contact you");
return false;
}
return true; // always do this properly
}

and then:

<form action="FormProcessor.html" method="get" onsubmit="return validateIt(this);">



Of course, your validation is pretty sloppy. A person could just enter a single space into all those text fields and you would happily say the form validated just fine.