Dynamic Select List Validation

[Total: 0    Average: 0/5]

This shows how to have a select list defined on the fly.

Head Code:

<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT"> 
<!--hide script from older browsers

 function validForm(passForm)
 {

  //This is the call where the error occurs
  alert(passForm.season.name+"n"+passForm.activities.name);
  if (!countEm(passForm.season, passForm.activities))
   {
    alert("You must select two activities")
    return false
   }
  return true
 }



 activities = new Object();
 activities.spring = new Array("Choose Activity ","Cleaning","Mowing","Planting");
 activities.summer = new Array("Choose Activity","Swimming","Baseball","Camping");
 activities.fall = new Array("Choose Activity","Raking","Football","School");
 activities.winter = new Array("Choose Activity","Ice skating","Sledding","Skiing");
 value = new Array("value 4 SELECTED","value 1","value 2","value 3");
 
 function setArray()
 {
  newSub.activities.options[0].text="Choose Activity";
  newSub.activities.options[0].value="Choose Activity";
  newSub.activities.options[0].selected = true;
 }

 function updateMenus(season) 
 {
  sel = season.selectedIndex;
  if (sel == 1) 
  {
   act = activities.spring;
  } 
  else if (sel == 2) 
  {
   act = activities.summer;
  } 
  else if (sel == 3) 
  {
   act = activities.fall;
  } 
  else if (sel == 4) 
  {
   act = activities.winter;
  } 
  else 
  {
   act = new Array("Choose Activity");
  }
  season.form.activities.length = act.length;
  for(i=0;i<act.length;i++)
   {
    season.form.activities.options[i].value = value[i];
    season.form.activities.options[i].text = act[i];
   }
  season.form.activities.options[0].selected = true;  
 }

 //This is the actual function which is being called when the error occurs
 function countEm(season, act)
 {
  count = 0;
  for(i=0;i<act.length;i++)
   {
    if(season.form.activities.options[i].selected == true)
     {
       count = count + 1;
     }
   }
  if (count != 2)
   {
    return false
   }
  return true
 }

 // end hiding script -->
</SCRIPT>

Body Code:

this must be in the BODY tag onLoad="setArray()" for this to work
<BR>
-=-or-=- <a href="javascript:setArray()">click here</a> to start it.

<P ALIGN=JUSTIFY>
Choose a season - and then you must choose 2 items from the new select list.

<FORM name = "newSub" onSubmit=" return validForm(this)" ACTION="mailto:someone@somewhere.com" ENCTYPE="text/plain" METHOD=POST>


<P>

<TABLE ALIGN=CENTER WIDTH = 830 BORDER = 0 CELLSPACING = 10>


<TR>
<TD WIDTH = 400>
Packages:
&nbsp
<select name="season" size=1 onChange="updateMenus(this)">
<option>Choose Season
<option>Spring
<option>Summer
<option>Fall
<option>Winter
</select>
</TD>
<TD WIDTH=50>
Channels:
&nbsp
</TD>
<TD WIDTH=290>
<select name="activities" MULTIPLE size=4">
<option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</select><br><br>
</TD>
</TR>

</TABLE>

<P>

<P>

<CENTER>
<INPUT TYPE="Submit" VALUE="Subscribe"> &nbsp <INPUT TYPE="Reset" Value="Reset Form">
</CENTER>

</FORM>

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *