Forum Moderators: open
theres a form (with a drop down menu) with these options: A, B, C, and D
if A or B is selected, the form ends with the "continue" button
if C or D is selected, javascript kicks in and automatially makes an extra part of the form appear (which doesn happen with A or B) and the user needs to fill in another 2 mandatory text fields before they can click "continue" and have the form end
yeh, if they select C/D, the extra part appear, if they make the wrong selection and before they click "contineu", they select A/B, the extra part dissapears
i hope someone can help :D
How about something like this:
<script type="text/javascript">
<!--
//this function shows/hides the moreFields div containing additional form elements
function showHide(obj){
//here we get the value of the select object
var curSel=obj.options[obj.selectedIndex].value
//if A, B, or no option selected, hide moreFields div
if(curSel=='A' ¦¦ curSel=='B' ¦¦ curSel=='' ){
document.getElementById('moreFields').style.display="none"
}else{
//otherwise show moreFields div
document.getElementById('moreFields').style.display="block"
}
}
//-->
</script>
<style type="text/css">
</style>
</head>
<!--
Here we call the showHide function on page load to reset
the div display status based on select object value
//-->
<body onload="showHide(document.getElementById('selTest'))">
<form method="post" action="">
Test Option
<!--
Here we attach the showHide function to the onchange event and pass the select object to the showHide function.
//-->
<select name="selTest" id="selTest" onchange="showHide(this)">
<option value="">Choose An Option</option>
<option value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
<option value="D">Option D</option>
</select>
<!--
The div moreFields is hidden by default and is made visible/hidden by the showHide() function
//-->
<div id="moreFields" style="display:none;">
Text 1 <input name="txt1" size="30" /><br />
Text 2 <input name="txt2" size="30" /><br />
</div>
<br /><input type="submit" value="Continue" />
</form>
Note: You will need to change all instances of ¦¦ to the 'pipe' character (that's the one over the backslash key) because the webmasterworld server transforms the 'pipe' character to ¦.
Hope this helps,
ajkimoto
