...

View Full Version : Dynamic form filter (showing and hiding options based on input)



Jeffsus
02-21-2007, 09:30 PM
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.

vwphillips
02-22-2007, 12:50 PM
untested


<!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>

Jeffsus
03-14-2007, 10:09 PM
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.

vwphillips
03-14-2007, 10:57 PM
Just guessing on the requirement but


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'




<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum