Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Dynamic form filter (showing and hiding options based on input)

    What I am doing is creating a web form application for scholarships. However, what I am wanting to happen is for the form itself (and the information entered) to act as a filter for what scholarships are available.

    What I've come up with so far works like this:
    http://jeffsus.com/apptest/application_form.html

    To see how the idea works, click "Some School Name" under Schools and then click "African American" under Ethnicity. You'll notice that the application list on the right narrows itself down depending on your choices.

    However, a problem comes in play if you, say, choose the wrong Ethnicity. Since "African American" told the "First Scholarship" to disappear, it stays invisible even if you click "Caucasian" after. I want the list on the right to have certain items disappear when you pick certain options, but I also need it to put back the appropriate items if someone changes an option.

    Considering there are several different form elements that are interacting with the Scholarships list, this could get complicated fast.

    I know the way I'm currently accomplishing this task so far is the wrong route, so I'm hoping someone here can guide me in the right direction.

    Thanks in advance.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 508 Times in 495 Posts
    untested

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    .formtitle
    {
        color: #000000;
        font-size: 12px;
        font-family: Georgia, Times New Roman, "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    }
    .required
    {
        color: #ff0000;
        font-size: 12px;
    	font-weight:bold;
        font-family: Georgia, Times New Roman, "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    }
    </style>
    <script type="text/javascript">
    <!--
    
    function changeDiv(the_div,the_change)
    {
      var the_style = getStyleObject(the_div);
      if (the_style != false)
      {
        the_style.display = the_change;
      }
    }
    
    function hideFirst(obj){
      showAll();
      var rads=obj.getElementsByTagName('INPUT');
      if (rads.length==2){
       if (rads[0].checked){ changeDiv("First","none"); }
      }
      if (obj.tagName=='SELECT'){
       if (obj.value=='1'){ hideFirst();hideThird(); }
       else if (obj.value=='2'){ changeDiv("Second","none");  }
       if (obj.value=='3'){ changeDiv("Second","none"); changeDiv("Third","none");  }
      }
    }
    
    function showAll()
    {
      changeDiv("First","block");
      changeDiv("Second","block");
      changeDiv("Third","block");
    }
    
    
    function hideFour()
    {
      changeDiv("four_sem","none");
      changeDiv("four_prof","none");
      changeDiv("sorry","none");
      changeDiv("four_other","none");
    }
    
    function getStyleObject(objectId) {
      if (document.getElementById && document.getElementById(objectId)) {
        return document.getElementById(objectId).style;
      } else if (document.all && document.all(objectId)) {
        return document.all(objectId).style;
      } else {
        return false;
      }
    }
    // -->
    function validate() {
       if (document.the_form.First_Name.value.length < 1) {
         alert("Please enter your first name.");
         return false;
       }
      if (document.the_form.Last_Name.value.length < 3) {
        alert("Please enter your last name.");
        return false;
      }
      return true;
    }
    </script>
    
    <script language="JavaScript" type="text/javascript">
    		<!--
    function filtery(pattern,list){
    	pattern = new RegExp('^'+pattern,"i");
    	i=0;
    	sel=0;
    	while(i<list.options.length){
    		if(pattern.test(list.options[i].text)){sel=i;break}
    		i++;
    	}
    	list.options.selectedIndex=sel;
    }
    		//-->
    		</script>
    </head>
    <body bgcolor="#cfc8a2">
    
    <form name="the_form" onSubmit="return validate();">
    
    <table width="750" border="0" cellspacing="0" cellpadding="0" align="center">
      <tr>
        <td width="500" valign="top">
    <!-- -->
    <table width="500" border="0" cellspacing="0" cellpadding="0" align="center">
      <tr>
        <td width="182" height="50" valign="top">
    	<span class="formtitle">First Name</span><span class="required">*</span><br>
    	<input name="First_Name" type="text" size="20">
    
    	</td>
        <td width="182" valign="top">
    	<span class="formtitle">Last Name</span><span class="required">*</span><br>
    	<input name="Last_Name" type="text" size="20">
    	</td>
        <td width="136" valign="top">
    	<span class="formtitle">Middle Name</span><br>
    
    	<input name="Last_Name" type="text" size="15">
    	</td>
      </tr>
    </table>
    <table width="500" border="0" cellspacing="0" cellpadding="0" align="center">
      <tr>
        <td width="62" height="50" valign="top">
    	<span class="formtitle">Title</span><br>
    	<input name="Title" type="text" size="4">
    
    	</td>
        <td width="140" valign="top">
    	<span class="formtitle">Gender</span><span class="required">*</span><br>
    	<input type="radio" name="Gender" value="Female"><span class="formtitle">Female</span>
    	<input type="radio" name="Gender" value="Male"><span class="formtitle">Male</span>
    	</td>
        <td width="298" valign="top">
    
    	<span class="formtitle">Birth Date (MM/DD/YYYY)</span><span class="required">*</span><br>
    	<input name="Last_Name" type="text" size="15">
    	</td>
      </tr>
    </table>
    <table width="500" border="0" cellspacing="0" cellpadding="0" align="center">
      <tr>
        <td width="182" height="50" valign="top">
    	<span class="formtitle">SSN#</span><span class="required">*</span><br>
    
    	<input name="SSN" type="text" size="20">
    	</td>
        <td width="318" height="50" valign="top">
    	<span class="formtitle">E-mail</span><span class="required">*</span><br>
    	<input name="email" type="text" size="20">
    	</td>
      </tr>
    </table>
    
    <table width="500" border="0" cellspacing="0" cellpadding="0" align="center">
      <tr>
        <td width="222" height="50" valign="top">
    	<span class="formtitle">Address</span><span class="required">*</span><br>
    	<input name="Address" type="text" size="30
    	">
    	</td>
        <td width="238" valign="top">
    	<span class="formtitle">Address 2 </span><br>
    
    	<input name="Address_2" type="text" size="15">
    	</td>
      </tr>
    </table>
    <table width="500" border="0" cellspacing="0" cellpadding="0" align="center">
      <tr>
        <td width="182" height="50" valign="top">
    	<span class="formtitle">City</span><span class="required">*</span><br>
    	<input name="City" type="text" size="20">
    
    	</td>
        <td width="62" valign="top">
    	<span class="formtitle">State</span><span class="required">*</span><br>
    	<input name="State" type="text" size="4">
    	</td>
        <td width="256" valign="top">
    	<span class="formtitle">ZIP Code</span><span class="required">*</span><br>
    
    	<input name="State" type="text" size="15">
    	</td>
      </tr>
    </table>
    <table width="500" border="0" cellspacing="0" cellpadding="0" align="center">
      <tr>
        <td width="500" height="50" valign="top">
    	<span class="formtitle">School Name</span><span class="required">*</span><br>
        <select name="yourSelect" onChange="hideFirst(this);">
    
          <option></option>
          <option value="1" >A School Name</option>
    	  <option value="2" >Some School Name</option>
    	  <option value="3" >Methodist School Name</option>
    	</select>
    	<input type="text" value="Find" size="10" name="yourTextField" onkeyup="filtery(this.value,this.form.yourSelect)" onchange="filtery(this.value,this.form.yourSelect)" onFocus="this.value=''">
    	</td>
    
      </tr>
    </table>
    <table width="500" border="0" cellspacing="0" cellpadding="0" align="center">
      <tr>
        <td width="500" height="50" valign="top" onClick="hideFirst(this);">
    	<span class="formtitle">Ethnicity</span><span class="required">*</span><br>
    	<input type="radio" name="Ethnicity"><span class="formtitle">Caucasian</span>
    	<input type="radio" name="Ethnicity"><span class="formtitle">African American</span>
    
    	</td>
      </tr>
    </table>
    <!-- -->
    </td>
    <td width="20">
    </td>
        <td width="230" valign="top">
    	<span class="formtitle">Available Scholarships</span>
    	<span class="formtitle">
    <div id="All">
    
    <div id="First" style="margin-top:20px;">
    <input type="checkbox" name="scholarships">First Scholarship
    </div>
    <div id="Second" style="margin-top:20px;">
    <input type="checkbox" name="scholarships">Second Scholarship
    </div>
    <div id="Third" style="margin-top:20px;">
    <input type="checkbox" name="scholarships">Third Scholarship
    </div>
    </div>
    </span>
    </td>
    </tr>
    <tr>
    <td width="500" colspan="3">
    <input type="SUBMIT" value="Submit" onSubmit="return validate();">
    </td>
    
    </tr>
    </table>
    
    </form>
    
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for the response. This project got put on hold, so that would explain my late reply.

    Your solution definitely does a better job than mine was. There does seem to be one problem in that there is too much independence between how, say, the drop down box and the radio buttons affect the list.

    For example, if you select "Some School Name", it removes Second Scholarship. However, if you click "Caucasion", it resets the list, removes its specified First Scholarship but puts Second Scholarship back. The point of the form is to filter the list of scholarships down depending on each option a user selects.

    If you have any further input on this, I'd appreciate it.

    Thanks.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 508 Times in 495 Posts
    Just guessing on the requirement but

    Code:
    function hideFirst(obj){
      var rads=obj.getElementsByTagName('INPUT');
      if (rads.length==2){
       changeDiv("First",(rads[0].checked)?"none":"block");
      }
      if (obj.tagName=='SELECT'){
       showAll();
       if (obj.value=='1'){ changeDiv("First","none");  }
       else if (obj.value=='2'){ changeDiv("Second","none");  }
       else if (obj.value=='3'){ changeDiv("Second","none"); changeDiv("Third","none");  }
      }
    }
    but best if you complete the Scholarship columns with 'Show' or 'Hide'


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    </head>
    
    <body>
    <table border="1">
      <tr>
        <td width="200" >Select</td>
        <td width="120" >Radio Checked</td>
        <td width="150" >First Scholarship</td>
        <td width="150" >Second Scholarship</td>
        <td width="150" >Third Scholarship</td>
      </tr>
      <tr>
        <td >A School Name</td>
        <td>Caucasian</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td >Some School Name</td>
        <td>Caucasian</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td >Methodist School Name</td>
        <td>Caucasian</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td >A School Name</td>
        <td>African American </td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td >Some School Name</td>
        <td>African American </td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td >Methodist School Name</td>
        <td>African American </td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •