dougv.com « Doug Vanderweide

Showing Or Hiding HTML Form Elements With JavaScript

Recently asked on Yahoo! Answers:

AJAX – show an extra text field if one radio button is pressed?

I’m looking for a short AJAX script that would add an extra textfield into a form if in the radiogroup a certain button is pressed.

Example
( ) yes ( ) no < if ‘no’ choosen

Before I get into answering this question, I’m going to launch into a tirade against the worst kind of Yahoo! Answers jackasses: The self-styled know-it-alls who curse darkness, rather than lighting candles.

Certain people on Yahoo! Answers can be counted upon to provide terse, arrogant, useless replies to serious questions. Most often, it’s something along the lines of, “You mean {confusing term} and it is {harangue that doesn’t answer question}. You can do this: {obscure, curt instructions}.”

Being brief when a question is succinct and appropriate is a virtue, so long as it’s obvious the person will understand your answer. It’s also perfectly fine, in my opinion, to ridicule totally moronic questions (such as, “How do I make a chat program?”, “How do I become a hacker?”, “How do I visit MySpace from school? They block it” or “How do I crack the serial number for this program?”).

But when someone (such as this questioner) makes a perfectly reasonable request, clearly demonstrates he has limited knowledge of the subject, makes it clear what he is after and what language he wants used, and even goes so far as to specifically ask for code, you’re not helping if you only say, “That isn’t AJAX, it’s JavaScript,” even if you add in some information that person clearly won’t understand.

Don’t be smug. Provide useful answers to serious questions or remain silent.

OK, my spleen is vented for the moment. On to the requested code.

The JavaScript to handle this change is very simple, and as a previous answer to the question noted, the way you achieve the effect of hiding form elements based on the values of other form elements is twofold:

• Wrap the elements in a DIV
• Change the display property of that DIV based on the input we desire

First, we’ll need an HTML form:

<form id="form1" method="post">
<div id="hidearea">
  <label>Enter Text Here:
<input id="mytext" name="mytext" type="text" />
  </label></div>
<input onclick="hideArea()" name="radiolist1" type="radio" value="yes" />
  Yes |
<input onclick="hideArea()" checked="checked" name="radiolist1" type="radio" value="no" />
  No
</form>

Notice that within the form, we have a DIV element with the id “hidearea”. In this example, everything within that DIV tag will be subject to being hidden or shown, based on our radiobutton selection.

Notice that we also have two radio buttons, both with the name radiolist1. I’m assuming that the user wants to get a yes or no answer to a single question.

Note also that each of the radio buttons has the JavaScript function hideArea() assigned to its onclick event. That’s the function that will determine whether we show, or hide, everything inside the div id=”hidearea” tag.

To begin the function, we’ll declare two variables: One that will hold the DIV, and the other which will get the radio button options as an array.

function hideArea() {
	var thearea = document.getElementById('hidearea');
	var thelist = document.getElementsByName('radiolist1');

We use getElementById to get the DIV, and getElementsByName for the radio buttons, because there is only one DIV with the ID “hidearea,” but two radio buttons with the name “radiolist1″. You can read this blog entry for more on how getElementById and getElementsByName work.

With our elements assigned to easy-to-use JavaScript variables, we can begin the processing part of the code.

Because getElementsByName always returns an array, we need to iterate through each of the radio buttons named radiolist1, looking for whichever one is checked.

When we find the one that is checked, we look at its value. If the value is “no,” we show the contents of the hidearea DIV; otherwise, we hide the DIV’s content. The way we do that is by setting the DIV’s CSS style of “display” to “none” in order to hide the DIV, or to blank in order to show it.

Also, once we have found the checked radio button, we don’t need to continue looking through the radio buttons, so we break out of the for loop.

	for(var i = 0; i < thelist.length; i++) {
		if(thelist[i].checked) {
			if(thelist[i].value == "no") {
				thearea.style.display = "";
			}
			else {
				thearea.style.display = "none";
			}
			break;
		}
	}
}

That’s all there is to it!

You can see a working demo of this code at http://www.dougv.com/demo/hideelement/.

I distribute code under the GNU GPL version 3.