Why won't this work...

tleisher · January 16, 2007

[code]
function show(elem)
{ document.getElementById(elem).style.visibility = 'visible';
}

function hide(elem)
{
document.getElementById(elem).style.visibility = 'hidden';
}

<tr><td width="50%">Type: </td><td width="50%"><select name="type"><option onClick="show('public'); hide('priv_p'); hide('private');">Public</option><option onClick="show('private'); show('priv_p'); hide('public');">Private</option></select></td></tr>

<tr id="priv_p"><td width="50%">Password: </td></tr>
<tr id="private"><td width="50%">Private</td></tr>
[/code]

It's supposed to make one tr disappear and the other appear, but it doesn't work. It doesn't do anything at all.

franklyn · January 16, 2007

you dont have a element named "public"

tleisher · January 16, 2007

I do on my actual page, thought I pasted that too. It doesnt do anything at all, even if I use it on other elements also.

nogray · January 16, 2007

Try to use different names, "public" and "private" could be reserved by JavaScript. instead use something like "pub_tr" or something like that.

tleisher · January 17, 2007

Here's the full code. It works great in Firefox but doesnt work at all (In fact, the things that are set by css to "collapse" are there, so is collapse not a valid tag in IE?

[code=php:0]
<html>
<head>
<title>Order</title>

<script type="text/javascript">

function USA()
{
document.getElementById('USA').style.display = 'block';
document.getElementById('c').style.display = 'none';
}

function Canada()
{
document.getElementById('USA').style.display = 'none';
document.getElementById('c').style.display = 'block';
}

function show(row)
{
document.getElementById(row).style.visibility = 'visible';
alert("AHH!!");
}

function hide(row)
{
document.getElementById(row).style.visibility = 'collapse';
alert("AHH!!");
}

</script>

<style type="text/css">

.name {
border: 2px solid white;
padding: 10px;
width: 550px;
}

#c { display: none; }
#private { visibility: collapse; }
#priv_p { visibility: collapse; }
#vent_slots { visibility: collapse; }
#hltv_slots { visibility: collapse; }

</style>

</head>
<body bgcolor="#000000" text="#FFFFFF">
<center><b><font size="+2">Order</font></b></center><br>
<br>

<form action="submit.php" method="post">
Personal Information:<br />
<div class="name">
<table border="0" cellspacing="0" cellpadding="0" width="600">
<tr><td width="50%">Last Name*:</td><td width="50%"><input type="text" name="last"></td></tr>
<tr><td width="50%">First Name*:</td><td width="50%"><input type="text" name="first"></td></tr>
<tr><td width="50%">E-mail address*:</td><td width="50%"><input type="text" name="email"></td></tr>
<tr><td width="50%">Street Address*:</td><td width="50%"><input type="text" name="street"></td></tr>
<tr><td width="50%">Country*:</td><td width="50%"><select name="country"><option onClick="USA();" selected>USA</option><option onClick="Canada();">Canada</option></select></td></tr>
<tr><td width="50%">City*:</td><td width="50%"><input type="text" name="city"></td></tr>

<tr><td width="50%">State*:</td><td width="50%">

<div id="c"><select name="state_canada"><option value="default">-Select Province-</option><option value="AB">Alberta</option><option value="BC">British Columbia</option><option value="MB">Manitoba</option><option value="NB">New Brunswick</option><option value="NL">Newfoundland and Labrador</option><option value="NS">Nova Scotia</option><option value="NU">Nunavut</option><option value="NT">N.W.T.</option><option value="ON">Ontario</option><option value="PE">Prince Edward Island</option><option value="QC">Quebec</option><option value="SK">Saskatchewan</option><option value="YT">Yukon</option></select></div>

<div id="USA"><select name="state_usa"><option value="default">-Select-</option><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="DC">District Of Columbia</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option><option value="PR">Puerto Rico</option><option value="VI">Virgin Island</option><option value="MP">Northern Mariana Islands</option><option value="GU">Guam</option><option value="AS">American Samoa</option><option value="PW">Palau</option></select></div>

</td></tr>

<tr><td width="50%">Postal/Zip Code*:</td><td width="50%"><input type="text" name="postal"></td></tr>
<tr><td width="50%">Telephone number*:</td><td width="50%"><input type="text" name="phone"></td></tr></table>
</div><br>
<br>

Server information<br />
<div class="name"><table border="0" cellspacing="0" cellpadding="0" width="600">
<tr><td width="50%">Game: </td><td width="50%">
<select name="game">
<option>Half-Life</option>
<option>Unreal Tournament (Coming Soon)</option>
<option>Quake (Coming Soon)</option></select></td></tr>

<tr id="mod_halflife"><td width="50%">Mod: </td><td width="50%"><select name="mod">
<option>Counter-Strike 1.6</option>
<option>Condition-Zero</option>
<option>Day Of Defeat 1.6</option>
<option>Team Fortress</option>
<option>Counter-Strike: Source</option>
<option>Day Of Deafeat: Source</option></select></td></tr>

<tr><td width="50%">Type: </td><td width="50%"><select name="type">
<option onClick="show('public'); hide('priv_p'); hide('private');">Public</option>
<option onClick="show('private'); show('priv_p'); hide('public');">Private</option></select></td></tr>

<tr id="priv_p"><td width="50%">Password*: </td><td width="50%"><input type="text" name="priv_pass"></td></tr>

<tr id="private"><td width="50%">Slots ($1.50/Slot): </td><td width="50%"><select name="slots"><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option></select></td></tr>

<tr id="public"><td width="50%">Slots ($2.00/Slot): </td><td width="50%"><select name="slots"><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option><option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option><option>31</option><option>32</option></select></td></tr>

<tr><td width="50%">Location:</td><td width="50%"> <select name="location">
<option>New York</option>
<option>Texas (Coming Soon)</option>
<option>California (Coming Soon)</option></select></td></tr>

<tr><td width="50%">Ventrilo:</td><td width="50%"> <select name="vent"><option onClick="show('vent_slots');">Yes</option><option selected onClick="hide('vent_slots');">No</option></select></td></tr>

<tr id="vent_slots"><td width="50%">Slots ($.50 Per Slot):</td><td width="50%"> <select name="vent_slots">
<option>10</option>
<option>20</option>
<option>50</option>
<option>100</option>
<option>200</option></select></td></tr>

<tr><td width="50%">HLTV:</td><td width="50%"> <select name="hltv">
<option onClick="show('hltv_slots');">Yes</option><option selected onClick="hide('hltv_slots');">No</option>
</select></td></tr>

<tr id="hltv_slots"><td width="50%">Slots:</td><td width="50%"> <select name="hltv_slots">
<option value="20">15 (FREE)</option>
<option value="50">50 ($5)</option>
<option value="100">100 ($10)</option>
<option value="200">200 ($20)</option>
</select></td></tr>

<tr><td width="50%">Rcon Password:</td><td width="50%"> <input type="text" name="rconpass"></td></tr>

<tr><td width="50%">FTP Username:</td><td width="50%"> <input type="text" name="username"></td></tr>
<tr><td width="50%">FTP Password:</td><td width="50%"> <input type="text" name="password"></td></tr>

<tr><td width="50%">Sales Person: </td><td width="50%"><input type="text" name="salesperson"></td></tr>

<tr><td width="50%">Coupon Code (Optional):</td><td width="50%"> <input type="text" name="coupon"></td></tr>

<tr><td width="50%">Term:</td><td width="50%"> <select name="term">
<option value="1">Monthly - No Discount</option>
<option value=".95">3 Months - 5%</option>
<option value=".9">6 Months - 10%</option>
<option value=".8">12 Months - 20%</option>
</select></td></tr></table>
<br>
Comments: <br />
<textarea name="comments"></textarea><br>
<br>
<textarea name="ToS" rows="25" cols="65">Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....Terms of Service go here.....</textarea>
<br />
<input type="checkbox" name="Signed_ToS"> I have read and agree to the Terms of Service<br>

</div>
<br>For Fruad Protection, we have logged your IP as: <?php echo $_SERVER['REMOTE_ADDR']; ?><br><br>

<input type="submit" value="Submit!">
<br>
<br>

</form>
[/code]

nogray · January 17, 2007

on thing I notice is that you have an "onClick" event on the option. IE doesn't support events on the options, you'll need to set the event on the whole select menu and use "onChange"

You can add a function to the script like
[code]
function show_hide(val){
if (val == "Public"){
show('public'); hide('priv_p'); hide('private');
}
else {
show('private'); show('priv_p'); hide('public');
}
}
[/code]
and change the Type select menu like below
[code]
<select name="type" onchange="show_hide(this.value);">
<option value="Public">Public</option>
<option value="Private">Private</option></select>
[/code]

bibby · January 22, 2007

I don't think visibility is a property of tr

fenway · January 22, 2007

I'm pretty sure you can play with the display attribute, though.

Sign In

Why won't this work...

Recommended Posts

tleisher

Link to comment

Share on other sites

franklyn

Link to comment

Share on other sites

tleisher

Link to comment

Share on other sites

nogray

Link to comment

Share on other sites

tleisher

Link to comment

Share on other sites

nogray

Link to comment

Share on other sites

bibby

Link to comment

Share on other sites

fenway

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information