PDA

View Full Version : Show Hide Issue with DIV Tags



GreenMan415
04-15-2012, 02:37 PM
Having a hec of a time with this code. I am trying to make it simple, any time someone chooses a drop down with a guest they get two fields, if they do not then they only get one field to fill in. If they choose the table of 8 then all fields show up. Please help!


<script src="../../Scripts/AC_RunActiveContent.js" type="text/javascript">

onload = function hide(mySel)
{
var selection;

selection = mySel.options[mySel].value;

switch (mySel){
case 'NoGuest': document.getElementById("Guest").style.visibility = "hidden";break;
case 'Guest': document.getElementById("Guest").style.visibility="visibile";break;
case 'TableOfEight': document.getElementById("Guest8").style.visibility = "visible";break;
case '4': document.getElementById("Guest8").style.visibility = "hidden";break;
}

}
</script>



<table>


<tr><td><input type="hidden" name="on0" value="Member Type">Member Type</td></tr><tr><td><select name="os0" onchange="showS(this.selectedIndex)">

<option selected="selected" value="0">--Member Type--</option>
<option value="NoGuest">Associate USD</option>
<option value="Guest">Associate & Guest USD</option>
<option value="NoGuest">AIA USD</option>
<option value="Guest">AIA & Guest USD</option>
<option value="NoGuest">Non-Member USD</option>
<option value="Guest">Non-Member & Guest USD</option>
<option value="TableOfEight">Table Of 8 USD</option>
</select> </td></tr>

<tr><td><input type="hidden" name="on1" value="Name"> Name &amp; Food</td></tr><tr><td><input type="text" name="os2" maxlength="200">

<select name="os1">
<option value="Filet of Sirloin, Haricot Vert, Potato Puree and Red Wine Jus">Filet of Sirloin, Haricot Vert, Potato Puree and Red Wine Jus </option>
<option value="Airline breast of Chicken with Spring Vegetable">Airline breast of Chicken with Spring Vegetable </option>
<option value="Pasta Primavera">Pasta Primavera </option>
</select></td></tr>

<tr><td>

<div id="Guest" style="visibility:hidden;">
<input type="text" name="os2" maxlength="200">

<select name="os3">
<option value="Filet of Sirloin, Haricot Vert, Potato Puree and Red Wine Jus">Filet of Sirloin, Haricot Vert, Potato Puree and Red Wine Jus </option>
<option value="Airline breast of Chicken with Spring Vegetable">Airline breast of Chicken with Spring Vegetable </option>
<option value="Pasta Primavera">Pasta Primavera </option>
</select>

</div>

</td></tr>


<tr><td>
<div id="Guest8" style="visibility:hidden;">
<input type="text" name="os4" style="display:none;" maxlength="200">

<select name="os5" style="display:none;">
<option value="Filet of Sirloin, Haricot Vert, Potato Puree and Red Wine Jus">Filet of Sirloin, Haricot Vert, Potato Puree and Red Wine Jus </option>
<option value="Airline breast of Chicken with Spring Vegetable">Airline breast of Chicken with Spring Vegetable </option>
<option value="Pasta Primavera">Pasta Primavera </option>
</select>

</td></tr>

<tr><td>

<input type="text" name="os6" style="display:none;" maxlength="200">

<select name="os7" style="display:none;">
<option value="Filet of Sirloin, Haricot Vert, Potato Puree and Red Wine Jus">Filet of Sirloin, Haricot Vert, Potato Puree and Red Wine Jus </option>
<option value="Airline breast of Chicken with Spring Vegetable">Airline breast of Chicken with Spring Vegetable </option>
<option value="Pasta Primavera">Pasta Primavera </option>
</select>

</td></tr>

<tr><td>

<input type="text" name="os8" style="display:none;" maxlength="200">

<select name="os9" style="display:none;">
<option value="Filet of Sirloin, Haricot Vert, Potato Puree and Red Wine Jus">Filet of Sirloin, Haricot Vert, Potato Puree and Red Wine Jus </option>
<option value="Airline breast of Chicken with Spring Vegetable">Airline breast of Chicken with Spring Vegetable </option>
<option value="Pasta Primavera">Pasta Primavera </option>
</select>

</td></tr>

<tr><td>

<input type="text" name="os10" style="display:none;" maxlength="200">

<select name="os11" style="display:none;">
<option value="Filet of Sirloin, Haricot Vert, Potato Puree and Red Wine Jus">Filet of Sirloin, Haricot Vert, Potato Puree and Red Wine Jus </option>
<option value="Airline breast of Chicken with Spring Vegetable">Airline breast of Chicken with Spring Vegetable </option>
<option value="Pasta Primavera">Pasta Primavera </option>
</select>

</td></tr>

<tr><td>

<input type="text" name="os12" style="display:none;" maxlength="200">

<select name="os13" style="display:none;">
<option value="Filet of Sirloin, Haricot Vert, Potato Puree and Red Wine Jus">Filet of Sirloin, Haricot Vert, Potato Puree and Red Wine Jus </option>
<option value="Airline breast of Chicken with Spring Vegetable">Airline breast of Chicken with Spring Vegetable </option>
<option value="Pasta Primavera">Pasta Primavera </option>
</select>
</div>
</td></tr>

<tr><td>

<input type="text" name="os14" style="display:none;" maxlength="200">

<select name="os15" style="display:none;">
<option value="Filet of Sirloin, Haricot Vert, Potato Puree and Red Wine Jus">Filet of Sirloin, Haricot Vert, Potato Puree and Red Wine Jus </option>
<option value="Airline breast of Chicken with Spring Vegetable">Airline breast of Chicken with Spring Vegetable </option>
<option value="Pasta Primavera">Pasta Primavera </option>
</select>
</div>

GreenMan415
04-16-2012, 01:28 AM
Well found one issue, forgot to change the function in the select onchange call, but it is still not working....

jscheuer1
04-16-2012, 04:40 AM
<script>

function hide(mySel)
{
var selection = mySel.value;
document.getElementById("Guest8").style.visibility = document.getElementById("Guest").style.visibility = "hidden";

switch (selection){
case 'NoGuest': document.getElementById("Guest").style.visibility = "hidden";break; //not used
case 'Guest': document.getElementById("Guest").style.visibility = "visible";break;
case 'TableOfEight': document.getElementById("Guest8").style.visibility = document.getElementById("Guest").style.visibility = "visible";break;
case '4': document.getElementById("Guest8").style.visibility = "hidden";break; //not used
}

}
</script>



<table>


<tr><td><input type="hidden" name="on0" value="Member Type">Member Type</td></tr><tr><td><select name="os0" onchange="hide(this)">

<option selected="selected" value="0">--Member Type--</option>
<option value="NoGuest">Associate USD</option>
<option value="Guest">Associate & Guest USD</option>
<option value="NoGuest">AIA USD</option>
<option value="Guest">AIA & Guest USD</option>
<option value="NoGuest">Non-Member USD</option>
<option value="Guest">Non-Member & Guest USD</option>
<option value="TableOfEight">Table Of 8 USD</option>
</select> </td></tr>

<tr><td><input type="hidden" name="on1" value="Name"> Name &amp; Food</td></tr><tr><td><input type="text" name="os2" maxlength="200">

<select name="os1">
<option value="Filet of Sirloin, Haricot Vert, Potato Puree and Red Wine Jus">Filet of Sirloin, Haricot Vert, Potato Puree and Red Wine Jus </option>
<option value="Airline breast of Chicken with Spring Vegetable">Airline breast of Chicken with Spring Vegetable </option>
<option value="Pasta Primavera">Pasta Primavera </option>
</select></td></tr>

<tr><td>

<div id="Guest" style="visibility:hidden;">
<input type="text" name="os2" maxlength="200">

<select name="os3">
<option value="Filet of Sirloin, Haricot Vert, Potato Puree and Red Wine Jus">Filet of Sirloin, Haricot Vert, Potato Puree and Red Wine Jus </option>
<option value="Airline breast of Chicken with Spring Vegetable">Airline breast of Chicken with Spring Vegetable </option>
<option value="Pasta Primavera">Pasta Primavera </option>
</select>

</div>

</td></tr>

</table>
<table id="Guest8" style="visibility:hidden;">
<tr><td>
<input type="text" name="os4" maxlength="200">

<select name="os5">
<option value="Filet of Sirloin, Haricot Vert, Potato Puree and Red Wine Jus">Filet of Sirloin, Haricot Vert, Potato Puree and Red Wine Jus </option>
<option value="Airline breast of Chicken with Spring Vegetable">Airline breast of Chicken with Spring Vegetable </option>
<option value="Pasta Primavera">Pasta Primavera </option>
</select>

</td></tr>

<tr><td>

<input type="text" name="os6" maxlength="200">

<select name="os7">
<option value="Filet of Sirloin, Haricot Vert, Potato Puree and Red Wine Jus">Filet of Sirloin, Haricot Vert, Potato Puree and Red Wine Jus </option>
<option value="Airline breast of Chicken with Spring Vegetable">Airline breast of Chicken with Spring Vegetable </option>
<option value="Pasta Primavera">Pasta Primavera </option>
</select>

</td></tr>

<tr><td>

<input type="text" name="os8" maxlength="200">

<select name="os9">
<option value="Filet of Sirloin, Haricot Vert, Potato Puree and Red Wine Jus">Filet of Sirloin, Haricot Vert, Potato Puree and Red Wine Jus </option>
<option value="Airline breast of Chicken with Spring Vegetable">Airline breast of Chicken with Spring Vegetable </option>
<option value="Pasta Primavera">Pasta Primavera </option>
</select>

</td></tr>

<tr><td>

<input type="text" name="os10" maxlength="200">

<select name="os11">
<option value="Filet of Sirloin, Haricot Vert, Potato Puree and Red Wine Jus">Filet of Sirloin, Haricot Vert, Potato Puree and Red Wine Jus </option>
<option value="Airline breast of Chicken with Spring Vegetable">Airline breast of Chicken with Spring Vegetable </option>
<option value="Pasta Primavera">Pasta Primavera </option>
</select>

</td></tr>

<tr><td>

<input type="text" name="os12" maxlength="200">

<select name="os13">
<option value="Filet of Sirloin, Haricot Vert, Potato Puree and Red Wine Jus">Filet of Sirloin, Haricot Vert, Potato Puree and Red Wine Jus </option>
<option value="Airline breast of Chicken with Spring Vegetable">Airline breast of Chicken with Spring Vegetable </option>
<option value="Pasta Primavera">Pasta Primavera </option>
</select>
</div>
</td></tr>

<tr><td>

<input type="text" name="os14" maxlength="200">

<select name="os15">
<option value="Filet of Sirloin, Haricot Vert, Potato Puree and Red Wine Jus">Filet of Sirloin, Haricot Vert, Potato Puree and Red Wine Jus </option>
<option value="Airline breast of Chicken with Spring Vegetable">Airline breast of Chicken with Spring Vegetable </option>
<option value="Pasta Primavera">Pasta Primavera </option>
</select>
</td></tr>
</table>