• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 253
  • Last Modified:

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>
0
nmarano
Asked:
nmarano
  • 2
  • 2
1 Solution
 
ZvonkoSystems architectCommented:
Check this:

if(theForm.stateID.value<1){
     alert("Please Select a State.");
     theForm.stateID.focus();
     return false;


0
 
nmaranoAuthor Commented:
Zvonko thanks again.  What would you recommend as far as a Javascript book?
0
 
Pravin AsarCommented:
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>

0
 
ZvonkoSystems architectCommented:
0
 
nmaranoAuthor Commented:
Thanks, and thanks pravinasar for the help also.  
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now