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.

More by this Author

  • Tips For How to Stain Concrete Floors
    1

    You don't always have to tile, carpet, or hardwood your floors. The new thing is to just stain the concrete that's already there. It's a lot of work, but if done properly, your home will look gorgeous. If you're...

  • How to Get Rid of Mice In and Around The House?
    5

    Until this year, the only time that I've had mice or rats in the house were when my daughter had pet mice and rats, and one of those times we did have one loose in the house. (Science fair project got loose.) Anyway,...

  • How to Build Wooden Roof Trusses
    21

    You may refer to a truss as the rafter, but it's basically the skeleton of the roof, carrying the weight of the frame and supporting the walls of the building. Trusses are very important to preventing the walls from...


Click to Rate This Article
working