SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast icdover's Avatar
    Join Date
    Jul 2003
    Location
    MA
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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>
    Form:
    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/>
    ....
    Sorry about the formatting.

  2. #2
    SitePoint Addict
    Join Date
    May 2004
    Location
    Europe
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    var choice = document.data.sid.options.value;
    options is an array, it doesn't have a value property. var choice = document.data.sid.value; is probably what you want.

  3. #3
    SitePoint Enthusiast icdover's Avatar
    Join Date
    Jul 2003
    Location
    MA
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks alot, that fixed my problem. Hehe silly error.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •