Link to home
Start Free TrialLog in
Avatar of nmarano
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=GetFileFromPath(GetTemplatePath())>

<cfquery name="GetSchools" datasource="aptvre">
SELECT ws_school .*,
ws_districttoschool.DistrictID FROM ws_school
INNER JOIN ws_districttoschool ON
ws_school.SchoolID =
ws_districttoschool.SchoolID
ORDER BY ws_districttoschool.DistrictID, 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[DistrictArray.length] = new District("#JSStringFormat(DistrictId)#", "#JSStringFormat(StateId)#", "#JSStringFormat(DistrictName)#");
</cfoutput>

<!--- For each School, append a new School object to the array of Schools --->
<cfoutput query="GetSchools">
     SchoolArray[SchoolArray.length] = new School("#JSStringFormat(SchoolId)#", "#JSStringFormat(DistrictId)#", "#JSStringFormat(schoolName)#");
</cfoutput>

/* Fill the District select box based on the stateID*/
function fillDistricts()
{
     // Stop if there is no selected ParentID
     if (document.formDistricts.stateID.selectedIndex == -1)
     {
          return;
     }
     
     var stateID = document.formDistricts.stateID.options[document.formDistricts.stateID.selectedIndex].value;
     
     // Remove all options in the District select box
     document.formDistricts.DistrictID.options.length = 0;
       var ox=0;
     document.formDistricts.DistrictID.options[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.DistrictID.options[ox++] = new Option(DistrictArray[i].districtname, DistrictArray[i].districtid);
          }
     }
       document.formDistricts.DistrictID.options.length = ox;
}

/* Fill the Schools select box based on the DistrictID*/
function fillSchools()
{
     // Stop if there is no selected ParentID
     if (document.formDistricts.DistrictID.selectedIndex == -1)
     {
          return;
     }
     
     var DistrictID = document.formDistricts.DistrictID.options[document.formDistricts.DistrictID.selectedIndex].value;
     
     // Remove all options in the Schools select box
     document.formDistricts.SchoolID.options.length = 0;
       var ox=0;
     document.formDistricts.SchoolID.options[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.SchoolID.options[ox++] = new Option(SchoolArray[i].schoolName, SchoolArray[i].schoolid);
          }
     }
       document.formDistricts.SchoolID.options.length = ox;
}
-->
</script>

<script>
function checkForm(theForm){
  if(theForm.Teach_fname.value==""){
     alert("Enter First Name.");
     theForm.Teach_fname.focus();
     return false;
  }
  if(theForm.Teach_lname.value==""){
     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">&nbsp;<a href="http://www.bc.edu/efeevaluation"><img src="../images/efe_surveylogo.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_action.cfm" onSubmit="return checkForm(this)">
      <p>
        <input type="hidden" name="hidworkshopID" value="<cfoutput>#varworkshopID# </cfoutput>">
        <input type="hidden" name="hidfacilitatorID" value="<cfoutput>#varfacilitatorID#</cfoutput>">
            <input type="hidden" name="hidCohortID" value="<cfoutput>#varcohortID#</cfoutput>">
      </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#">#GetStates.statename#</option>
          </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
Avatar of Zvonko
Zvonko
Flag of North Macedonia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of nmarano
nmarano

ASKER

Zvonko thanks again.  What would you recommend as far as a Javascript book?
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.length) {
        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>

Avatar of nmarano

ASKER

Thanks, and thanks pravinasar for the help also.