asked on

hide and display <div> based on user selection

Hello. I need some assistance with a feature on a webpage. I believe JavaScript can achieve this. I have a selection box and when YES is selected, a few elements should appear. When NO is selected, nothing should appear.

Currently, the items to be hidden/exposed are wrapped in the following:

<div id="SAPInformation" style="display: none;">  </div>

Open in new window

When YES is selected from the following selection box, those hidden elements should be displayed at once:

<SELECT CLASS="selectMenu" ID="_1_1_45_1" NAME="_1_1_45_1" ONCHANGE="markDirty();">
<OPTION VALUE="" >&lt;None&gt;</OPTION>

<OPTION VALUE="Yes" >Yes</OPTION>
<OPTION VALUE="No" >No</OPTION>
</SELECT>

Open in new window

To make things easier, here is the code for the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<form>
<li class="section">
			<h3>SAP Information</h3>
			<div>
				Please update the following SAP-related document information.</div>
</li>
            <li><label class="desc">Does this request impact SAP? <span class="req">*</span></label>
			<div>
<SELECT CLASS="selectMenu" ID="_1_1_45_1" NAME="_1_1_45_1" ONCHANGE="markDirty();">
<OPTION VALUE="" >&lt;None&gt;</OPTION>

<OPTION VALUE="Yes" >Yes</OPTION>
<OPTION VALUE="No" >No</OPTION>
</SELECT>
			</div>
			</li>
            
<div id="SAPInformation" style="display: none;">
            <li><label class="desc">Has it been reviewed/approved by GBS?</label>
			<div>
<SELECT CLASS="selectMenu" ID="_1_1_46_1" NAME="_1_1_46_1" ONCHANGE="markDirty();">
<OPTION VALUE="" >&lt;None&gt;</OPTION>

<OPTION VALUE="Yes" >Yes</OPTION>
<OPTION VALUE="No" >No</OPTION>
</SELECT>				
			</div>
			</li>
            
            <li>
			<label class="desc">Will this change be included in Weekly SAP Change Communication?</label>
			<div>
<SELECT CLASS="selectMenu" ID="_1_1_47_1" NAME="_1_1_47_1" ONCHANGE="markDirty();">
<OPTION VALUE="" >&lt;None&gt;</OPTION>

<OPTION VALUE="Yes" >Yes</OPTION>
<OPTION VALUE="No" >No</OPTION>
</SELECT>				
			</div>
			</li>
            
            <li><label class="desc">Help Desk Ticket Number or Project Number</label>
			<div>
<INPUT CLASS="field text medium" TYPE="text" NAME="_1_1_48_1" TITLE="Help Desk Ticket Number or Project Number" ID="_1_1_48_1" VALUE="" SIZE="32" MAXLENGTH="32" ONCHANGE="markDirty();">				
			</div>
			</li>
            
             <li><label class="desc">Rev-Trac Request Number</label>
			<div>
<INPUT CLASS="field text medium" TYPE="text" NAME="_1_1_49_1" TITLE="Rev-Trac Request Number" ID="_1_1_49_1" VALUE="" SIZE="32" MAXLENGTH="32" ONCHANGE="markDirty();">				
			</div>
			</li>
            </div>
</form>            
            
</body>
</html>

Open in new window

I appreciate and help I can get. Thank you for your time.

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

AxISQS

ASKER

@mplungjan, I replaced the following:

<SELECT CLASS="selectMenu" ID="_1_1_45_1" NAME="_1_1_45_1" ONCHANGE="markDirty();">

Open in new window

with:

<SELECT CLASS="selectMenu" ID="_1_1_45_1" NAME="_1_1_45_1" ONCHANGE="markDirty();
document.getElementById('SAPInformation').style.display=this.value=='Yes'?'block':'none'">

Open in new window

It's not working and I think something looks odd, maybe the question mark after the Yes? Any ideas? Thanks for your time.

Michel Plungjan

It should work. It is called a ternary operator
For clarity you can put brackets around
(this.value=='Yes')

Anyway I assume markdirty exists. If not my code of course will fail
I also assume there is some text in the div we show!!!

http://jsfiddle.net/mplungjan/74WNA/

AxISQS

ASKER

I must be doing something wrong... maybe hiding/displaying what's in a <div> isn't the proper approach?

When YES is selected, show everything contained in <div id="SAPInformation">

Please see my code below which contains @mplungjan modifications.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<form>
<li class="section">
			<h3>SAP Information</h3>
			<div>
				Please update the following SAP-related document information.</div>
</li>
            <li><label class="desc">Does this request impact SAP? <span class="req">*</span></label>
			<div>
<SELECT CLASS="selectMenu" ID="_1_1_45_1" NAME="_1_1_45_1" ONCHANGE="markDirty();document.getElementById'SAPInformation').style.display=this.value=='Yes'?'block':'none'">
<OPTION VALUE="" >&lt;None&gt;</OPTION>

<OPTION VALUE="Yes" >Yes</OPTION>
<OPTION VALUE="No" >No</OPTION>
</SELECT>
			</div>
			</li>
            
<div id="SAPInformation" style="display: none;">
            <li><label class="desc">Has it been reviewed/approved by GBS?</label>
			<div>
<SELECT CLASS="selectMenu" ID="_1_1_46_1" NAME="_1_1_46_1" ONCHANGE="markDirty();">
<OPTION VALUE="" >&lt;None&gt;</OPTION>

<OPTION VALUE="Yes" >Yes</OPTION>
<OPTION VALUE="No" >No</OPTION>
</SELECT>				
			</div>
			</li>
            
            <li>
			<label class="desc">Will this change be included in Weekly SAP Change Communication?</label>
			<div>
<SELECT CLASS="selectMenu" ID="_1_1_47_1" NAME="_1_1_47_1" ONCHANGE="markDirty();">
<OPTION VALUE="" >&lt;None&gt;</OPTION>

<OPTION VALUE="Yes" >Yes</OPTION>
<OPTION VALUE="No" >No</OPTION>
</SELECT>				
			</div>
			</li>
            
            <li><label class="desc">Help Desk Ticket Number or Project Number</label>
			<div>
<INPUT CLASS="field text medium" TYPE="text" NAME="_1_1_48_1" TITLE="Help Desk Ticket Number or Project Number" ID="_1_1_48_1" VALUE="" SIZE="32" MAXLENGTH="32" ONCHANGE="markDirty();">				
			</div>
			</li>
            
             <li><label class="desc">Rev-Trac Request Number</label>
			<div>
<INPUT CLASS="field text medium" TYPE="text" NAME="_1_1_49_1" TITLE="Rev-Trac Request Number" ID="_1_1_49_1" VALUE="" SIZE="32" MAXLENGTH="32" ONCHANGE="markDirty();">				
			</div>
			</li>
            </div>
</form>            
            
</body>
</html>

Open in new window

Thanks for your help!

Michel Plungjan

you are missing the opening bracket from

document.getElementById'SAPInformation').style.display=this.value=='Yes'?'block':'none'

which should be

document.getElementById('SAPInformation').style.display=this.value=='Yes'?'block':'none'

also you need to have the function markDirty in the page and spelled that way since JS is case sensitive so if I misspelled it, please change it

AxISQS

ASKER

Can we remove markDirty all together? It's an empty function so it's safer to remove than let it cause problems. I'm also very curious to see what changes in your suggestion if we eliminate markDirty. Good lesson for me to learn.

Michel Plungjan

Of course. It was there before I started

AxISQS

ASKER

thanks @mplungjan, this worked great! i'm going to award points and open a new question as i have one additional detail to add. thanks.

hide and display &lt;div&gt; based on user selection

hide and display <div> based on user selection