Javascript reveal function help

**chixmoi** · 01-27-2009, 03:16 AM

hello PHP masters! i really need your help... im quite a newbie to programming, actually im more into systems admin work, but i was asked to do a project for my company, basically an online request form, part of the form is some applications listed where requesters can choose one. basically what i want to do is i want to reveal a corresponding hidden div/table when a selection option is chosen,
can you give me some ideas regarding javascript reveal function? below is part of my code:

* selection *

<select name="Application" id='App'>
<option selected="selected" value='0'>Choose an option</option>
<option value='app1'>Application 1</option>
<option value='app2'>Application 2</option>
<option value='app3'>Application 3</option>
<option value='app4'>Application 4</option>
</select>

* hidden div/table *

<div id='app1' style="display:none;" > Application 1 </div>

<div id='app2' style="display:none;" > Applicationi 2 </div>

<div id='app3' style="display:none;" > Application 3 </div>

<div id='app4' style="display:none;" > Application 4 </div>

hoping for your response mga boss, daghang salamat!

**silent-kill** · 01-27-2009, 07:12 AM

you use

elem = document.getElementById("divIdHere")

elem.style.display = 'block';

**raybanz21** · 01-31-2009, 04:11 PM

actually, daghan pa agi. pwede ka mugamit ug functions or use ajax perhaps.

**raybanz21** · 01-31-2009, 04:59 PM

bai chixmoi,

I hope I can help you with this.

index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="template.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">
function showLayer(objID) {
if (!document.getElementById) return;
var ob = document.getElementById(objID).style;
ob.display = (ob.display == 'block')?'none': 'block';
}
</script>
</head>
<body>
<select name="Application" onchange="showLayer(this.value)">
<option selected="selected" value='0'>Choose an option</option>
<option value='app1'>Application 1</option>
<option value='app2'>Application 2</option>
<option value='app3'>Application 3</option>
<option value='app4'>Application 4</option>
</select>

<div id='app1' class="layer"> Application 1 <a href="javascript:showLayer('app1')">Close</a></div>

<div id='app2' class="layer"> Application 2 <a href="javascript:showLayer('app2')">Close</a></div>

<div id='app3' class="layer"> Application 3 <a href="javascript:showLayer('app3')">Close</a></div>

<div id='app4' class="layer"> Application 4 <a href="javascript:showLayer('app4')">Close</a></div>
</body>
</html>

template.css:

.layer{
display:none;
}

**t1m0y** · 02-05-2009, 02:18 PM

You can try this too:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="template.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">
function showDiv(obj) {
for(var i=1;i < obj.length;i++){

var divId = obj.options[i].value;
if(obj.value == obj.options[i].value) document.getElementById(divId).style.display = 'block';
else document.getElementById(divId).style.display = 'none';
}
}
</script>
<style>
.layer{
display:none;
}
</style>
</head>
<body>
<select name="Application" id="Application" onchange="showDiv(this)">
<option selected="selected" value='0'>Choose an option</option>
<option value='app1'>Application 1</option>
<option value='app2'>Application 2</option>
<option value='app3'>Application 3</option>
<option value='app4'>Application 4</option>
</select>

<div id='app1' class="layer"> Application 1 </div>

<div id='app2' class="layer"> Application 2 </div>

<div id='app3' class="layer"> Application 3 </div>

<div id='app4' class="layer"> Application 4 </div>
</body>
</html>

Thread: Javascript reveal function help

Thread Tools

Search Thread