SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
Thread: Form Menu Dynamic Show/Hide
-
Jun 14, 2004, 09:31 #1
Form Menu Dynamic Show/Hide
Im trying to display State - Town relations where one Dropdown menu of the form holds the States and then based on the state that is chosen, causes the correct Town Dropdown menu to display. I believe what i have should work, but i must have missed something. Any help would be great.. Thanks.
Javascript:
Code:<script language="javascript"> function showField() { var choice = document.data.sid.options.value; if(choice == "1") { document.getElementById('SID2-div').style.display = "none"; document.getElementById('SID3-div').style.display = "none"; document.getElementById('SID4-div').style.display = "none"; document.getElementById('SID5-div').style.display = "none"; document.getElementById('SID1-div').style.display = "block"; } else if(choice == "2") { document.getElementById('SID2-div').style.display = "block"; document.getElementById('SID3-div').style.display = "none"; document.getElementById('SID4-div').style.display = "none"; document.getElementById('SID5-div').style.display = "none"; document.getElementById('SID1-div').style.display = "none"; } else if(choice == "3") { document.getElementById('SID2-div').style.display = "none"; document.getElementById('SID3-div').style.display = "block"; document.getElementById('SID4-div').style.display = "none"; document.getElementById('SID5-div').style.display = "none"; document.getElementById('SID1-div').style.display = "none"; } else if(choice == "4") { document.getElementById('SID2-div').style.display = "none"; document.getElementById('SID3-div').style.display = "none"; document.getElementById('SID4-div').style.display = "block"; document.getElementById('SID5-div').style.display = "none"; document.getElementById('SID1-div').style.display = "none"; } else if(choice == "5") { document.getElementById('SID2-div').style.display = "none"; document.getElementById('SID3-div').style.display = "none"; document.getElementById('SID4-div').style.display = "none"; document.getElementById('SID5-div').style.display = "block"; document.getElementById('SID1-div').style.display = "none"; } else if(choice == "") { document.getElementById('SID2-div').style.display = "none"; document.getElementById('SID3-div').style.display = "none"; document.getElementById('SID4-div').style.display = "none"; document.getElementById('SID5-div').style.display = "none"; document.getElementById('SID1-div').style.display = "none"; } } </script>
Code:<form enctype="multipart/form-data" action="<?=$_SERVER['PHP_SELF']?>" method="post" name="data"> Restaurant Name:<br/> <input type="text" name="name" value="" size="30" maxlength="50"><br/><br/> State:<br/> <select name="sid" size="1" onchange="showField()"> <option value='' selected>Select a State</option> <? while ($stateoption = mysql_fetch_array($states)) { $sid = $stateoption['SID']; $sname = htmlspecialchars($stateoption['StateName']); echo("<option value='$sid'>$sname</option>\n"); } ?> </select><br/><br/> Town:<br/> <div style="display: none;" name="SID1-div" id="SID1-div"> <select name="tid" size="1"> <?$towns = mysql_query('SELECT TID, TownName FROM Towns WHERE SID="1"'); while ($townoption = mysql_fetch_array($towns)) { $tid = $townoption['TID']; $tname = htmlspecialchars($townoption['TownName']); echo("<option value='$tid' selected>$tname</option>\n"); } ?> </select> </div> <div style="display: none;" name="SID2-div" id="SID2-div"> <select name="tid" size="1"> <?$towns = mysql_query('SELECT TID, TownName FROM Towns WHERE SID="2"'); while ($townoption = mysql_fetch_array($towns)) { $tid = $townoption['TID']; $tname = htmlspecialchars($townoption['TownName']); echo("<option value='$tid' selected>$tname</option>\n"); } ?> </select> </div> <div style="display: none;" name="SID3-div" id="SID3-div"> <select name="tid" size="1"> <?$towns = mysql_query('SELECT TID, TownName FROM Towns WHERE SID="3"'); while ($townoption = mysql_fetch_array($towns)) { $tid = $townoption['TID']; $tname = htmlspecialchars($townoption['TownName']); echo("<option value='$tid' selected>$tname</option>\n"); } ?> </select> </div> <div style="display: none;" name="SID4-div" id="SID4-div"> <select name="tid" size="1"> <?$towns = mysql_query('SELECT TID, TownName FROM Towns WHERE SID="4"'); while ($townoption = mysql_fetch_array($towns)) { $tid = $townoption['TID']; $tname = htmlspecialchars($townoption['TownName']); echo("<option value='$tid' selected>$tname</option>\n"); } ?> </select> </div> <div style="display: none;" name="SID5-div" id="SID5-div"> <select name="tid" size="1"> <?$towns = mysql_query('SELECT TID, TownName FROM Towns WHERE SID="5"'); while ($townoption = mysql_fetch_array($towns)) { $tid = $townoption['TID']; $tname = htmlspecialchars($townoption['TownName']); echo("<option value='$tid' selected>$tname</option>\n"); } ?> </select> </div><br/><br/> ....
-
Jun 14, 2004, 10:37 #2
- Join Date
- May 2004
- Location
- Europe
- Posts
- 216
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Code:var choice = document.data.sid.options.value;
-
Jun 14, 2004, 11:31 #3
Thanks alot, that fixed my problem. Hehe silly error.
Bookmarks