PDA

View Full Version : Filterable Site Based on User Populated Text Fields

Nigel1985
06-24-2007, 09:07 PM
Hello, I am trying to create a page where the user can select four of their best skills and put in their past experience (in years) in previously defined boxes and have that automatically update the "results." But, i need the results to be filterable to match the top three skills exactly. So i put in skils A,B,C,D and i get results of jobs that "match" A,B,C. I have created a javascript for show/hide but i dont know how to add this updatable/filterable content. Here is a demo of my page


<html>
<head>
<script type="text/javascript">
<!--
function experience(element_id)
{
var results = document.getElementById(element_id + "_Results");
var element = document.getElementById(element_id);

results.value = element.value;
}
</script>
<script>
function showhide(id){
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == "none"){
obj.style.display = "";
} else {
obj.style.display = "none";
}
}
}
</script>
<title></title>
</head>
<body>
<form name="compass">
<table border="1" width="100%">
<tr>
<td colspan="2">Top Competencies</td>
</tr>
<tr>
<td><select name="competencies"><option value="Setting Direction">Setting Direction</option><option value="Leadership Courage">Leadership Courage</option><option value="Creating the Environment">Creating the Environment</option><option value="Building and Maintaing Relationships">Building and Maintaining Relationships</option><option value="Developing for the Future">Developing for the Future</option><option value="Organizational Savvy">Organizational Savvy</option><option value="Achieving Measurable Results">Achieving Measurable Results</option>
<option value="Customer Focus">Customer Focus</option>
<option value="Ethics and Integrity">Ethics and Integrity</option>
<option value="Composure">Composure</option>
<option value="Personal Learning">Personal Learning</option>
<option value="Dealing with Ambiguity">Dealing with Ambiguity</option>
<option value="Decision-Making">Decision-Making</option>
<option value="Interpersonal Savvy">Interpersonal Savvy</option>
<option value="Results Oriented">Results Oriented</option>
</select></td>
<td><select name="competencies"><option value="Setting Direction">Setting Direction</option><option value="Leadership Courage">Leadership Courage</option><option value="Creating the Environment">Creating the Environment</option><option value="Building and Maintaing Relationships">Building and Maintaining Relationships</option><option value="Developing for the Future">Developing for the Future</option><option value="Organizational Savvy">Organizational Savvy</option><option value="Achieving Measurable Results">Achieving Measurable Results</option>
<option value="Customer Focus">Customer Focus</option>
<option value="Ethics and Integrity">Ethics and Integrity</option>
<option value="Composure">Composure</option>
<option value="Personal Learning">Personal Learning</option>
<option value="Dealing with Ambiguity">Dealing with Ambiguity</option>
<option value="Decision-Making">Decision-Making</option>
<option value="Interpersonal Savvy">Interpersonal Savvy</option>
<option value="Results Oriented">Results Oriented</option>
</select></td>
</tr>
<tr>
<td><select name="competencies"><option value="Setting Direction">Setting Direction</option><option value="Leadership Courage">Leadership Courage</option><option value="Creating the Environment">Creating the Environment</option><option value="Building and Maintaing Relationships">Building and Maintaining Relationships</option><option value="Developing for the Future">Developing for the Future</option><option value="Organizational Savvy">Organizational Savvy</option><option value="Achieving Measurable Results">Achieving Measurable Results</option>
<option value="Customer Focus">Customer Focus</option>
<option value="Ethics and Integrity">Ethics and Integrity</option>
<option value="Composure">Composure</option>
<option value="Personal Learning">Personal Learning</option>
<option value="Dealing with Ambiguity">Dealing with Ambiguity</option>
<option value="Decision-Making">Decision-Making</option>
<option value="Interpersonal Savvy">Interpersonal Savvy</option>
<option value="Results Oriented">Results Oriented</option>
</select></td>
<td><select name="competencies"><option value="Setting Direction">Setting Direction</option><option value="Leadership Courage">Leadership Courage</option><option value="Creating the Environment">Creating the Environment</option><option value="Building and Maintaing Relationships">Building and Maintaining Relationships</option><option value="Developing for the Future">Developing for the Future</option><option value="Organizational Savvy">Organizational Savvy</option><option value="Achieving Measurable Results">Achieving Measurable Results</option>
<option value="Customer Focus">Customer Focus</option>
<option value="Ethics and Integrity">Ethics and Integrity</option>
<option value="Composure">Composure</option>
<option value="Personal Learning">Personal Learning</option>
<option value="Dealing with Ambiguity">Dealing with Ambiguity</option>
<option value="Decision-Making">Decision-Making</option>
<option value="Interpersonal Savvy">Interpersonal Savvy</option>
<option value="Results Oriented">Results Oriented</option>
</select></td>
</tr>
<tr>
<td colspan="1"><input type="text" name="1" size="100%" value="Consulting to senior leadership" disabled></td>
<td colspan="1"><input type="text" id="Requirements1" name="Requirements" onChange="experience('Requirements1')" value="Enter Years"></td>
</tr>
<tr>
<td colspan="1"><input type="text" name="2" size="100%" value="Equal Employment Opportunity (EEO) and related human resource practices" disabled></td>
<td colspan="1"><input type="text" id="Requirements2" name="Requirements" onChange="experience('Requirements2')" value="Enter Years"></td>
</tr>
<tr>
<td colspan="1"><input type="text" name="3" size="100%" value="Recruiting with a large company" disabled></td>
<td colspan="1"><input type="text" id="Requirements3" name="Requirements" onChange="experience('Requirements3')" value="Enter Years"></td>
</tr>
<tr>
<td colspan="1"><input type="text" name="4" size="100%" value="Leadership and management" disabled></td>
<td colspan="1"><input type="text" id="Requirements4" name="Requirements" onChange="experience('Requirements4')" value="Enter Years"></td>
</tr>
<tr>
<td colspan="1"><input type="text" name="5" size="100%" value="Recruiting for diverse functional areas" disabled></td>
<td colspan="1"><input type="text" id="Requirements5" name="Requirements" onChange="experience('Requirements5')" value="Enter Years"></td>
</tr>
<tr>
<td colspan="4">Results</td>
</tr>
<tr>
<td colspan="1"><div style="display:;" id="script"><input type="text" name="1" size="100%" value="Consulting to senior seadership" disabled></td>
<td colspan="1"><input type="text" id="Requirements1_Results" name="Requirements1_Results" disabled></td>
</tr>
<tr>
<td colspan="1"><div style="display:;" id="script2"><input type="text" name="2" size="100%" value="Equal Employment Opportunity (EEO) and related human resource practices" disabled></td>
<td colspan="1"><input type="text" id="Requirements2_Results" name="Requirements2_Results" disabled></td>
</tr>
<tr>
<td colspan="1"><input type="text" name="3" size="100%" value="Recruiting with a large company" disabled></td>
<td colspan="1"><input type="text" id="Requirements3_Results" name="Requirements3_Results" disabled></td>
</tr>
<tr>
<td colspan="1"><input type="text" name="4" size="100%" value="Leadership and management" disabled></td>
<td colspan="1"><input type="text" id="Requirements4_Results" name="Requirements4_Results" disabled></td>
</tr>
<tr>
<td colspan="1"><input type="text" name="5" size="100%" value="Recruiting for diverse functional areass" disabled></td>
<td colspan="1"><input type="text" id="Requirements5_Results" name="Requirements5_Results" disabled></td></div>
</tr>
<p><a href="#" onclick="showhide('script'); return(false);">hide again</a></p>
</table>
</form>
</body>
</html>


That is the page, i know it looks long and codey but its just because it has many examples. I really would appreciate any help!

Thanks so much for all your past help guys/gals
Nigel1985
06-25-2007, 02:16 PM
Ok new problem. I have a table with a series of <tr> and <td> tags and I need a javascript function to target segments of this table under one large tag.
The table looks something like this
<html>
<head>
<script>
function showhide(id){
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == "none"){
obj.style.display = "";
} else {
obj.style.display = "none";
}
}
}
</script>
</head>
<body>
<table>
<div style="display: none;" id="director">
<tr>
<td>Topic 1</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>Topic 1</td>
</tr>
<tr>
<td>Aa</td>
<td>Bb</td>
<td>Cc</td>
</tr>
</div>
<tr>
<td><select><option value="Option" onClick="showhide('director'); return(false);">Option</option>
</tr>
</table>
</body>
</html>

and I want to assign a class or ID name target Topic 1 and 2 using javascript, aka a show/hide funtion that would target it when using a drop down box. I know you can target inside a table with a <div> tag on the outside but how can i script this?

thanks