Multiple hidden show/hide div's base on a combo box and a check box [Archive]

agr8lemon

07-31-2009, 05:49 PM

Hello everyone,

I am more comfortable with PHP than Javascript so I'm hoping someone can help me out with my question.

What I would like to have is an html form that has a combo box, and if someone select a certain selection in the combo box, then a hidden div right under it becomes visible.
That div would hold a pair of radio buttons, and based on the selection of those, another div may appear with a input field shows up.

<form OnSubmit="return ValidateForm(form)" action="mysql.php" method="post" name="form" >

<tr>
<td><img src="require.gif" align="center" width="7" height="5"> Employee Type</td><td colspan="3"><select name="type">
<option value="Please Select an employee type:">Please Select an employee type:</option>
<option value="Department Transfer">Department Transfer</option>
<option value="Previous Student">Previous Student</option>
<option value="Physician / P.A.">Physician / P.A.</option>
<option value="Volunteer">Volunteer</option>
<option value="Update Employee">Update Current Employee</option>
<option value="New Employee">New Employee</option>
</td>
</tr>

So based on this code, I'd like to make it where if someone selects Physician / P.A. from the combo box, then a pair of radio buttons show up underneath it asking lets say "choice1" or "choice2", if "choice2" is selected another div containing a text input field.

I've tried to do this with my limited JS knowlege, but have never gotten it to work so any help would be great!

Thank you~

rainarts

08-01-2009, 05:50 AM

Hi,

try this simple variation, in which i have used some object to itemized and minipulate the selected state of combo box.

Here's the complete document sample:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Window-target" content="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Free Live Help!</title>
<style id="css21" type="text/css" media="screen">
/* <![CDATA[ */
html, body {
text-align : center;
min-width : 960px;
width : auto;
}
form, table {
border : none;
margin : 0 auto;
padding : 0; }
table {
border-collapse : collapse;
width : 100%;
min-height : 36px;
color : #708090;
letter-spacing : 1px;
text-align : center;
background-color : #eee; }
td:first-child {
width : 20%;
background-color : #fff;
border-right : 1px solid; }
td {
padding : .300em .800em .300em .800em;
width : auto;
height : inherit;
vertical-align : middle;
border-top : 1px solid;
border-bottom : 1px solid; }
.show { display : block; }
.hide { display : none; }
/* ]]> */
</style>
<script type="text/javascript">
/* <![CDATA[ */
var updateOption = function( sel ) {
var sel;
var xElem = ( function( xID ) {
var xID = xID || 0;
if ( xID ) {
(( xID = document.getElementById( xID )) ? xID : xID = document.all[ xID ] );
return xID;
} return false;
} );
if ( typeof sel === "object" )
sel = sel;
else
sel = xElem( sel );
var index = sel.selectedIndex;
var selVal = sel.options[ index ].value || sel.value;
var val;
var xLabel;
var radio;
var div = xElem( "dynamic" );
var checkedItem = xElem( "content" );
var items = ( { } );
items[ index ] = {
1 : selVal + ' <span style="color : #190;">choice #1</span>',
2 : selVal + ' <span style="color : #190;">choice #2</span>'
}; if ( items[ index ] && index ) {
for ( label in items[ index ] ) {
val = String( items[ index ][ label ] );
xLabel = String( "option" + label );
radio = String( "r" + label );
xElem( radio ).value = String( val.split(/<[\w\W]+>/)[ 0 ] + "choice #" + label );
xElem( radio ).onclick = ( function() {
if ( this.checked ) {
checkedItem.className = "show";
xElem( "txt" ).value = this.value;
return;
} checkedItem.className = "hide";
xElem( "txt" ).value = "";
} )
xElem( xLabel ).innerHTML = val;
}
div.className = "show";
return;
} div.className = "hide";
};
/* ]]> */
</script>
</head>
<body>
<div id="main">
<form id="testform" name="testform" action="mysql.php" method="post" onsubmit="return validateForm( this.id );" >
<table id="table" frame="void" rules="none" summary="Javascript: Live Demo!">
<tr>
<td>Select Employee Type:</td>
<td><select id="sType" name="sType" size="1" onchange="updateOption( this.id );">
<option value="Please select an employee type:">Please select an employee type:</option>
<option value="Department Transfer">Department Transfer</option>
<option value="Previous Student">Previous Student</option>
<option value="Physician / P.A.">Physician / P.A.</option>
<option value="Volunteer">Volunteer</option>
<option value="Update Employee">Update Current Employee</option>
<option value="New Employee">New Employee</option>
</select></td>
<td style="text-align : left;width : 30%"><div id="dynamic" class="hide"><b>1.</b> <span id="option1"></span> <input type="radio" id="r1" name="rad" value="" /><br /><br /><b>2.</b> <span id="option2"></span> <input type="radio" id="r2" name="rad" value="" /><div id="content" class="hide" style="margin-top:1em">
<label for="txt">Selected Employee Type:
<input style="border : 1px solid #ccc; height : 30px; letter-spacing : 2px; color : #aaa; text-align : center; width : 98%;" type="text" id="txt" name="txt" value="" /></label></div></div>
</td>
<td style="text-align : right; width : 20%"><input type="submit" value="- submit -" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>

hope it helps...