- HubPages»
- Technology»
- Computers & Software»
- Computer Science & Programming»
- Programming Languages
Javascript: How to hide and show other form fields with a select box with Javascript and HTML
Hiding and Showing HTML Form Fields
Have you ever had a request or you just thought it was a better user experience with some of you web development, if you could hide and show other html elements based on a select box, or drop down list?
Currently, I'm working on a web based ColdFusion report page, and I wanted to add some filter options to the report results. Allowing the user some flexibility for querying the data they need. I didn't want to build a busy front-end or GUI, where they had to select or not select some of the options.
I wanted them to have one select box, and based on that selection, the appropriate other options or HTML elements were displayed for the user to pick from. Just trying to make it a better solution for the user, and not complicated it for them.
Sample Description Of Work
In this example, I am using a input form with one select box and three additional html fields or sections. The example is to retrieve sales orders. I want the user to select from a drop down list the filter or sql query options,
which are
1. Order Number
2. Ship State
3. Last Name
Javascript: HEAD TAG
Place the follow javascript between the <HEAD></HEAD> tags.
<script type="text/javascript">
function doclickoptions(objfilteroptions){
if (objfilteroptions.value=="selOrderNumber")
{
document.getElementById("ordernumber").style.display='block'; //show order number input box
document.getElementById("shipstate").style.display='none'; //hide ship state input or select box
document.getElementById("lastname").style.display='none'; //hide last name input box
}
else if (objfilteroptions.value=="selShipState")
{
document.getElementById("ordernumber").style.display='none'; //hide order number input box
document.getElementById("shipstate").style.display='block'; //show ship state input or select box
document.getElementById("lastname").style.display='none'; //hide last name input box
}
else if (objfilteroptions.value=="selLastName")
{
document.getElementById("ordernumber").style.display='none'; //hide order number input box
document.getElementById("shipstate").style.display='none'; //hide ship state input or select box
document.getElementById("lastname").style.display='block'; //show last name input box
}
else {
document.getElementById("ordernumber").style.display='block'; //hide order number input box
document.getElementById("shipstate").style.display='none'; //hide ship state input or select box
document.getElementById("lastname").style.display='none'; //hide last name input box
}
}
</script>
HTML FORM: BODY TAG
Sample HTML
SELECT BOX EXAMPLE:
<select name="reportoption" onChange="doclickoptions(this)" id="reportoption">
<option value="">- - - Select Option - - -
<option value="selOrderNumber">Order Number
<option value="selShipState">Ship State
<option value="selLastName">Last Name
</cfselect>
OPTION EXAMPLES:
<div id="ordernumber" style="display:none">
<input type="text" name="ordernumber" size="20">
</div>
<div id="shipstate" style="display:none">
<input type="text" name="shipstate" size="20">
</div>
<div id="lastname" style="display:none">
<input type="text" name="lastname" size="20">
</div>
CONCLUSION
The above example is a simple example to a sometimes complicated feature to build for users. The example, is just that. Use your imagination and you can see how this code help you in your day to day coding.
Using Coldfusion, you could dynamically populate the select box, and dynamically populate other fields as needed. You could even dynamically adjust the javascript to reflect additional fields or data.
- Javascript: Pop-up window from a HTML link
- Javascript: How to create a simple slide show with clickable links
- Javascript: Pop up Message Box On Submit
- Javascript: How to disable Right Click option
- Javascript: Controlling the number of characters entered into a HTML form field.
- Javascript: How to refresh parent window from a pop-up after closing pop-up
- Javascript: Rotate a different image when the page is reloaded
- Javascript: Drop Down Menu List
- Javascript: A simple calendar with today's date highlighted.