Javascript Validation Not Working [Archive]

jb77

10-26-2006, 05:16 PM

Can anybody help me (a javascript newbie) figure out why this script validation isn't working? :confused: I'm tearing my hair out with this... any help is appreciated!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<HEAD>
<TITLE>Survey</TITLE>

<script type="text/javascript" language="JavaScript">

</script>

<link rel="StyleSheet" type="text/css" href="store.css" media="screen">
</HEAD>
<BODY>
<table width="100%" cellpadding="20" cellspacing="0" bgcolor="#FFFFFF" border="0">
<tr>
<td>
<h1 class="survey">Survey</h1>
<form action="/cgi-bin/MasterFeedback.cgi" method="post" name="Survey" onSubmit="return CheckRequiredFields()">
<input type="hidden" name="subject" value="Shopping Survey-0610">
<input type="hidden" name="realname" value="john">
<input type="hidden" name="email" value="john@doe.com">
<input type="hidden" name="thankyou" value="/cgi-bin/survey0610_confirm.cgi">
<ol class="questions">
<li>What are your favorite hobbies? <span class="note">(choose all that apply)</span>
<ul class="cols">
<li><input type="checkbox" name="x_Hobbies" value="Music" /> Music</li>
<li><input type="checkbox" name="x_Hobbies" value="Sports" /> Sports</li>
<li><input type="checkbox" name="x_Hobbies" value="ArtsCrafts" /> Arts / Crafts</li>
<li><input type="checkbox" name="x_Hobbies" value="Reading" /> Reading</li>
<li><input type="checkbox" name="x_Hobbies" value="TV" /> Watching TV</li>
<li><input type="checkbox" name="x_Hobbies" value="Cooking" /> Cooking</li>
<li><input type="checkbox" name="x_Hobbies" value="HomeDecorating" /> Home Decorating</li>
<li><input type="checkbox" name="x_Hobbies" value="Fashion" /> Fashion</li>
<li><input type="checkbox" name="x_Hobbies" value="Shopping" /> Shopping</li>
<li class="widecol"><input type="checkbox" name="x_Hobbies" value="Other" /> Other: <input type="text" name="x_Hobbies_Other" size="40" maxlength="" onfocus="this.className='currentField'" onchange="this.className='changedField'" /></li>
</ul>
</li>
</ol>

<p>Thank you for filling out the survey. Please click SUBMIT!</p>

<p class="center"><input type="image" src="images/2006/btn_submit_wht.gif" name="submitbutton" alt="Submit" /><input type="reset" value="Clear Form" class="resetbtn" alt="Clear All Form Fields" onclick="if (!confirm('Are you sure you want to clear this form?')) return false;" /></p><br />
</form>
</td>
</tr>
</table>

</BODY>
</HTML>

DougMck

10-26-2006, 09:16 PM

Without trying the code I think the problem is because all the checkboxes have the same name so the validation code does not know what checkbox you are refering to.

I'm sure I read somewhere that when you try get the value of an element by using its name and there is more than one element with that name in the document the JavaScript selects one of them at random.

Giving the same name to checkboxes does not work in the same way as giving the same name to radio buttons.

The best and easiest thing you can do is to make the name of all the checkboxes different, you will of course have to change the validation code to something more verbose than you have now, but this will make it easier when trying to save the information after the form has been submitted.

If you really were not keen on changing the checkbox names, in the validation code you could try getting all the elements by id and see if you can loop through them. Have a flag set to 0 initially and then in the loop test to see if the checkbox has a value and if so set the flag to 1. After the loop return false if the flag is still 0 to indicate nothing was selected.