nmarano
asked on
error handling a select box
I have a select box that has a value selected, but I want to make sure that they are actually selected something from the select boxes rather than Please select your state. Can I add this to the existing error handling that I have on the page?
if(theForm.stateID.value== "-1"){
alert("Please Select a State.");
theForm.stateID.focus();
return false;
Or is that completely incorrect? Here is all the code for this page
Thanks
Nick
<cfquery name="GetStates" datasource="aptvre">
SELECT * FROM ws_state
ORDER BY StateName
</cfquery>
<cflock type="readonly" scope="session" timeout="30">
<cfset varworkshopName = session.workshopname>
<cfset varfirstName = session.Firstname >
<cfset varlastName = session.Lastname>
<cfset varworkshopID = session.workshopID>
<cfset varfacilitatorID = session.facilitatorID>
<cfset varCohortID = session.cohortID>
</cflock>
<cfquery name="GetDistricts" datasource="aptvre">
SELECT * FROM ws_districts
ORDER BY StateId, districtName
</cfquery>
<cfquery name="GetTeacher" datasource="aptvre">
Select *
FROM ws_teacher
Order by teacherID, TeacherLastName;
</cfquery>
<cfset CurrentPage=GetFileFromPat h(GetTempl atePath()) >
<cfquery name="GetSchools" datasource="aptvre">
SELECT ws_school .*,
ws_districttoschool.Distri ctID FROM ws_school
INNER JOIN ws_districttoschool ON
ws_school.SchoolID =
ws_districttoschool.School ID
ORDER BY ws_districttoschool.Distri ctID, SchoolName
</cfquery>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>EFE Teacher Registration</title>
<link rel="stylesheet" type="text/css" href="../../styles/intasc_ form.css" />
<script type="text/javascript" language="JavaScript">
<!--
/* Dynamically populate District select box based on seleted stateID and then Schools based on districtID */
// Create an array to hold Districts and Schools
var DistrictArray = new Array;
var SchoolArray = new Array;
// Define a custom Javascript object type to represent a single District
function District(districtid, stateid, districtname)
{
this.districtid = districtid;
this.stateid = stateid;
this.districtname = districtname;
}
// Define a custom Javascript object type to represent a single School
function School(schoolid, districtid, schoolName)
{
this.schoolid = schoolid;
this.districtid = districtid;
this.schoolName = schoolName;
}
<!--- For each District, append a new District object to the array of Districts --->
<cfoutput query="GetDistricts">
DistrictArray[DistrictArra y.length] = new District("#JSStringFormat( DistrictId )#", "#JSStringFormat(StateId)# ", "#JSStringFormat(DistrictN ame)#");
</cfoutput>
<!--- For each School, append a new School object to the array of Schools --->
<cfoutput query="GetSchools">
SchoolArray[SchoolArray.le ngth] = new School("#JSStringFormat(Sc hoolId)#", "#JSStringFormat(DistrictI d)#", "#JSStringFormat(schoolNam e)#");
</cfoutput>
/* Fill the District select box based on the stateID*/
function fillDistricts()
{
// Stop if there is no selected ParentID
if (document.formDistricts.st ateID.sele ctedIndex == -1)
{
return;
}
var stateID = document.formDistricts.sta teID.optio ns[documen t.formDist ricts.stat eID.select edIndex].v alue;
// Remove all options in the District select box
document.formDistricts.Dis trictID.op tions.leng th = 0;
var ox=0;
document.formDistricts.Dis trictID.op tions[ox++ ] = new Option('Select Your District', '-1');
// For each item in the Districtarray ...
for (var i = 0; i < DistrictArray.length; i++)
{
// If the District's stateIDFK is the same as the currently selected stateID
if (DistrictArray[i].stateid == stateID)
{
// Put a new option in the District select box
document.formDistricts.Dis trictID.op tions[ox++ ] = new Option(DistrictArray[i].di strictname , DistrictArray[i].districti d);
}
}
document.formDistricts.Dis trictID.op tions.leng th = ox;
}
/* Fill the Schools select box based on the DistrictID*/
function fillSchools()
{
// Stop if there is no selected ParentID
if (document.formDistricts.Di strictID.s electedInd ex == -1)
{
return;
}
var DistrictID = document.formDistricts.Dis trictID.op tions[docu ment.formD istricts.D istrictID. selectedIn dex].value ;
// Remove all options in the Schools select box
document.formDistricts.Sch oolID.opti ons.length = 0;
var ox=0;
document.formDistricts.Sch oolID.opti ons[ox++] = new Option('Select Your School', '-1');
// For each item in the Schoolarray ...
for (var i = 0; i < SchoolArray.length; i++)
{
// If the School's DistrictIDFK is the same as the currently selected DistrictID
if (SchoolArray[i].districtid == DistrictID)
{
// Put a new option in the School select box
document.formDistricts.Sch oolID.opti ons[ox++] = new Option(SchoolArray[i].scho olName, SchoolArray[i].schoolid);
}
}
document.formDistricts.Sch oolID.opti ons.length = ox;
}
-->
</script>
<script>
function checkForm(theForm){
if(theForm.Teach_fname.val ue==""){
alert("Enter First Name.");
theForm.Teach_fname.focus( );
return false;
}
if(theForm.Teach_lname.val ue==""){
alert("Enter Last Name.");
theForm.Teach_lname.focus( );
return false;
}
if(theForm.txtpw.value=="" ){
alert("Enter A Valid Email.");
theForm.txtpw.focus();
return false;
}
return true;
}
</script>
</link>
</head>
<body>
<center>
<div id="survey">
<div id="logo"> <a href="http://www.bc.edu/efeevaluation"><img src="../images/efe_surveyl ogo.gif" alt="intasc" width="87" height="54" border="0" /></a></div>
<p class="header">Teacher Registration</p>
<p class="subsection">User Information </p>
<br>
<form method="POST" name="formDistricts" action="ws_registration_ac tion.cfm" onSubmit="return checkForm(this)">
<p>
<input type="hidden" name="hidworkshopID" value="<cfoutput>#varworks hopID# </cfoutput>">
<input type="hidden" name="hidfacilitatorID" value="<cfoutput>#varfacil itatorID#< /cfoutput> ">
<input type="hidden" name="hidCohortID" value="<cfoutput>#varcohor tID#</cfou tput>">
</p>
<br>
<p class="subsection">Step 1:
<select name="stateID" onChange="fillDistricts()" >
<option value="">Select State in which You Teach</option>
<cfoutput query="GetStates">
<option value="#GetStates.stateid# ">#GetStat es.statena me#</optio n>
</cfoutput>
</select>
</p>
<p class="subsection">Step 2:
<select name="DistrictID" onChange="fillSchools()">
<option value="0">Select Your District</option>
</select>
</p>
<p class="subsection">Step 3:
<select name="SchoolID">
<option value="0">Select Your School</option>
</select>
</p>
<p class="subsection">Step 4:</p>
<table border="0" cellpadding="6">
<tr>
<td align="right">First Name:</td>
<td><span class="response">
<input type="text" name="Teach_fname" width="320px">
</span></td>
</tr>
<tr>
<td align="right">Last Name: </td>
<td><span class="response">
<input type="text" name="Teach_lname" width="320px">
</span></td>
</tr>
<tr>
<td align="right">Email:</td>
<td><span class="response">
<input type="text" name="txtpw" width="280px">
</span></td>
</tr>
</table>
<p class="instructions">
<input type="submit" name="Submit" value="SUBMIT">
</p>
<input type="hidden" name="MM_InsertRecord" value="formDistricts">
</form>
</div>
</center>
</body>
</html>
if(theForm.stateID.value==
alert("Please Select a State.");
theForm.stateID.focus();
return false;
Or is that completely incorrect? Here is all the code for this page
Thanks
Nick
<cfquery name="GetStates" datasource="aptvre">
SELECT * FROM ws_state
ORDER BY StateName
</cfquery>
<cflock type="readonly" scope="session" timeout="30">
<cfset varworkshopName = session.workshopname>
<cfset varfirstName = session.Firstname >
<cfset varlastName = session.Lastname>
<cfset varworkshopID = session.workshopID>
<cfset varfacilitatorID = session.facilitatorID>
<cfset varCohortID = session.cohortID>
</cflock>
<cfquery name="GetDistricts" datasource="aptvre">
SELECT * FROM ws_districts
ORDER BY StateId, districtName
</cfquery>
<cfquery name="GetTeacher" datasource="aptvre">
Select *
FROM ws_teacher
Order by teacherID, TeacherLastName;
</cfquery>
<cfset CurrentPage=GetFileFromPat
<cfquery name="GetSchools" datasource="aptvre">
SELECT ws_school .*,
ws_districttoschool.Distri
INNER JOIN ws_districttoschool ON
ws_school.SchoolID =
ws_districttoschool.School
ORDER BY ws_districttoschool.Distri
</cfquery>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>EFE Teacher Registration</title>
<link rel="stylesheet" type="text/css" href="../../styles/intasc_
<script type="text/javascript" language="JavaScript">
<!--
/* Dynamically populate District select box based on seleted stateID and then Schools based on districtID */
// Create an array to hold Districts and Schools
var DistrictArray = new Array;
var SchoolArray = new Array;
// Define a custom Javascript object type to represent a single District
function District(districtid, stateid, districtname)
{
this.districtid = districtid;
this.stateid = stateid;
this.districtname = districtname;
}
// Define a custom Javascript object type to represent a single School
function School(schoolid, districtid, schoolName)
{
this.schoolid = schoolid;
this.districtid = districtid;
this.schoolName = schoolName;
}
<!--- For each District, append a new District object to the array of Districts --->
<cfoutput query="GetDistricts">
DistrictArray[DistrictArra
</cfoutput>
<!--- For each School, append a new School object to the array of Schools --->
<cfoutput query="GetSchools">
SchoolArray[SchoolArray.le
</cfoutput>
/* Fill the District select box based on the stateID*/
function fillDistricts()
{
// Stop if there is no selected ParentID
if (document.formDistricts.st
{
return;
}
var stateID = document.formDistricts.sta
// Remove all options in the District select box
document.formDistricts.Dis
var ox=0;
document.formDistricts.Dis
// For each item in the Districtarray ...
for (var i = 0; i < DistrictArray.length; i++)
{
// If the District's stateIDFK is the same as the currently selected stateID
if (DistrictArray[i].stateid == stateID)
{
// Put a new option in the District select box
document.formDistricts.Dis
}
}
document.formDistricts.Dis
}
/* Fill the Schools select box based on the DistrictID*/
function fillSchools()
{
// Stop if there is no selected ParentID
if (document.formDistricts.Di
{
return;
}
var DistrictID = document.formDistricts.Dis
// Remove all options in the Schools select box
document.formDistricts.Sch
var ox=0;
document.formDistricts.Sch
// For each item in the Schoolarray ...
for (var i = 0; i < SchoolArray.length; i++)
{
// If the School's DistrictIDFK is the same as the currently selected DistrictID
if (SchoolArray[i].districtid
{
// Put a new option in the School select box
document.formDistricts.Sch
}
}
document.formDistricts.Sch
}
-->
</script>
<script>
function checkForm(theForm){
if(theForm.Teach_fname.val
alert("Enter First Name.");
theForm.Teach_fname.focus(
return false;
}
if(theForm.Teach_lname.val
alert("Enter Last Name.");
theForm.Teach_lname.focus(
return false;
}
if(theForm.txtpw.value==""
alert("Enter A Valid Email.");
theForm.txtpw.focus();
return false;
}
return true;
}
</script>
</link>
</head>
<body>
<center>
<div id="survey">
<div id="logo"> <a href="http://www.bc.edu/efeevaluation"><img src="../images/efe_surveyl
<p class="header">Teacher Registration</p>
<p class="subsection">User Information </p>
<br>
<form method="POST" name="formDistricts" action="ws_registration_ac
<p>
<input type="hidden" name="hidworkshopID" value="<cfoutput>#varworks
<input type="hidden" name="hidfacilitatorID" value="<cfoutput>#varfacil
<input type="hidden" name="hidCohortID" value="<cfoutput>#varcohor
</p>
<br>
<p class="subsection">Step 1:
<select name="stateID" onChange="fillDistricts()"
<option value="">Select State in which You Teach</option>
<cfoutput query="GetStates">
<option value="#GetStates.stateid#
</cfoutput>
</select>
</p>
<p class="subsection">Step 2:
<select name="DistrictID" onChange="fillSchools()">
<option value="0">Select Your District</option>
</select>
</p>
<p class="subsection">Step 3:
<select name="SchoolID">
<option value="0">Select Your School</option>
</select>
</p>
<p class="subsection">Step 4:</p>
<table border="0" cellpadding="6">
<tr>
<td align="right">First Name:</td>
<td><span class="response">
<input type="text" name="Teach_fname" width="320px">
</span></td>
</tr>
<tr>
<td align="right">Last Name: </td>
<td><span class="response">
<input type="text" name="Teach_lname" width="320px">
</span></td>
</tr>
<tr>
<td align="right">Email:</td>
<td><span class="response">
<input type="text" name="txtpw" width="280px">
</span></td>
</tr>
</table>
<p class="instructions">
<input type="submit" name="Submit" value="SUBMIT">
</p>
<input type="hidden" name="MM_InsertRecord" value="formDistricts">
</form>
</div>
</center>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Normally under such situations, you could do little differntly
So the checking/validation is much simpler
<script language="javascript">
function validate (theForm) {
if (!theForm.sel1.value.lengt h) {
alert ('Option not selected');
return false;
}
return true;
}
</script>
<form>
<select name="sel1">
<option value="">Please select option</option>
<option value="op1">Option 1</option
<option value="op2">Option 2</option
</select>
<input type="submit" onclick="return validate(this.form);">
</form>
So the checking/validation is much simpler
<script language="javascript">
function validate (theForm) {
if (!theForm.sel1.value.lengt
alert ('Option not selected');
return false;
}
return true;
}
</script>
<form>
<select name="sel1">
<option value="">Please select option</option>
<option value="op1">Option 1</option
<option value="op2">Option 2</option
</select>
<input type="submit" onclick="return validate(this.form);">
</form>
My book was: http://www.dannyg.com/pubs/dhtml/index.html
His JavaScript book is: http://www.dannyg.com/pubs/jsb/
His JavaScript book is: http://www.dannyg.com/pubs/jsb/
ASKER
Thanks, and thanks pravinasar for the help also.
ASKER