ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Javascript: How to hide and show other form fields with a select box with Javascript and HTML

Updated on September 11, 2012

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.

Click to Rate This Article