Web Analytics Made Easy -
StatCounter make an input field depend on 2 dynamic menus - CodingForum

Announcement

Collapse
No announcement yet.

make an input field depend on 2 dynamic menus

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • make an input field depend on 2 dynamic menus

    Hi everyone,
    I hope someone can understant me, coz I'm so confused because of this code.
    I need to write a code that have 2 dropdown menus and 2 input fields , all of these are depend on each other. once u select one from the first menu the related things in DB will display in the 2nd menu.Right now I do it well by ajax script and php but when I try to complete to make input field depend on the the 2nd menu , it doesn't work by many ways every time double P.O box field is displayed .. this is the main page code
    Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html>
    
    <head>
    
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    
    <title>Traditional Addresses</title>
    
    <link href="style.css" rel="stylesheet" type="text/css" />
    
    </head>
    
    <body>
    
    
    
    <!-- start header -->
    
    <div id="topbg">&nbsp;</div>
    
    <div id="header">&nbsp;</div>
    
    <!-- end header -->
    
    
    
    <!-- start page -->
    
    	<div id="page">
    
    		<div class="bgtop">
    
    			<div class="bgbtm">
    
    			
    
    				<!-- start content -->
    
    				<div id="content">
    
    					<div class="post">
    
    						<h1 class="title">Traditional Address</h1>
    
    
    
    							 <form name="sel" >
    
    								<div>
    
    									<h3>Choose The Appropraite Information :</h3>
    
    									<br />
    
    								</div>
    
    										<div>
    
    											<table id="tab">							
    
    												<tr>
    
    													<td>City : </td>
    
    													<td> <font id=cities> <select ><option value="0">Choose one ...</option></select></font></td>
    
    												</tr>
    
    												<tr>
    
    													<td>Post Offic Or (Zip Code) : </td>
    
    													<td> <font id=post_office><select><option value="0">Choose one ...</option></select></font></td>
    
    												</tr>
    <script language=Javascript>
    function Inint_AJAX() {
    try { return new ActiveXObject("Msxml2.XMLHTTP");  } catch(e) {} //IE
    try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
    try { return new XMLHttpRequest();          } catch(e) {} //Native Javascript
    alert("XMLHttpRequest not supported");
    return null;
    };
    
    function dochange(src, val) {
    var req = Inint_AJAX();
    req.onreadystatechange = function () {
     if (req.readyState==4) {
          if (req.status==200) {
               document.getElementById(src).innerHTML=req.responseText; //retuen value
          }
     }
    };
    req.open("GET", "state.php?data="+src+"&val="+val); //make connection
    req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
    req.send(null); //send value
    }
    
    window.onLoad=dochange('cities', -1);         // value in first dropdown
    </script>
    
    												<tr>
    
    													<td>P.O.Box : </td>
    
    													<td> <input align=middle type="text" name="p.o.box" value="" size="30"/></td>
    
    												</tr>
    
    												<tr>
    
    													<td>Enter the owner name (Optional): </td>
    
    													<td> <input align=middle type="text" name="owner_name" value="" size="30"/></td>
    
    												</tr>
    
    												<tr>
    
    												<td><br /></td>
    
    												</tr>
    
    												<tr>
    
    												<td> <input value="Save And Back" name="SaveAndBack" type="button" style="background-color: #D3D3D3" /></td>
    
    												<td> <input value="OK" name="OK" type="button" style="background-color: #D3D3D3" /></td>
    
    												</tr>
    
    										</table>
    
    								</form>
    
    							</div>
    
    
    
    					</div>
    
    				</div>
    
    				<!-- end content -->
    
    				
    
    				<!-- start sidebar -->
    
    				<div id="sidebar">
    
    					<ul>
    
    						<li>
    
    							<h2><b>Site Language</b></h2>
    
    							<ul>
    
    								<li><a href="#">English</a></li>
    
    								<li><a href="#">عربي</a></li>
    
    
    
    							</ul>
    
    						</li>
    
    					</ul>
    
    				</div>
    
    				<!-- end sidebar -->
    
    
    
    				
    
    				<div style="clear:both">&nbsp;</div>
    
    			</div>
    
    		</div>
    
    	</div>
    
    <div id="footer">
    
    	<p> <a href="index.html">Home</a>&nbsp;•&nbsp;<a href="wasel_address.html">Wasel 
    
    	Addresses</a>&nbsp;•&nbsp;<a href="traditional_address.html">Traditional Addresses</a>&nbsp;•&nbsp;<a href="service_search.html">Service 
    
    	Search</a></p>
    
    </div>
    
    <div style="clear:both">&nbsp;</div>
    
    </body>
    
    </html>
    and this is were the support file state.php
    Code:
    <?
    //set IE read from page only not read from cache
    header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
    header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
    header ("Cache-Control: no-cache, must-revalidate");
    header ("Pragma: no-cache");
    
    header("content-type: application/x-javascript; charset=tis-620");
    
    $data=$_GET['data'];
    $val=$_GET['val'];
    
    //set database
    $dbhost = "localhost";
    $dbuser = "root";
    $dbpass = "";
    $dbname    = "post_db";
    mysql_pconnect($dbhost,$dbuser,$dbpass) or die ("Unable to connect to MySQL server");
    
    if ($data=='cities') {  // first dropdown
      echo "<select name='cities' onChange=\"dochange('post_office', this.value)\">\n";
      echo "<option value='0'>==== choose one ====</option>\n";
      $result=mysql_db_query($dbname,"select `city_id`, `city_name` from cities order by `city_id`");
      while(list($id, $name)=mysql_fetch_array($result)){
           echo "<option value=\"$id\" >$name</option> \n" ;
      }
    } else if ($data=='post_office') { // second dropdown
      echo "<select name='post_office' >\n";
      echo "<option value='0'>====choose one ====</option>\n";                   
    $val2=$val;
          $val = substr($val,0,2); 
      $result=mysql_db_query($dbname,"SELECT `city_id`, `post_office` FROM traditional_add WHERE `city_id` = '$val2'  ");
      while(list($id, $name)=mysql_fetch_array($result)){
           echo "<option value=\"$id\" >$name</option> \n" ;
      }
    }
    echo "</select>\n";
    
    
    ?>


    the question is according to the code .. how can I make an input field that is depend on the previous choice of menus?? if I want the validation is made on the same page before submitting ..

    thanks for all.

  • #2
    Your code is too annoying to try to read, so can you just re-post the portions of the code that are relevant? And explain what you are trying to do with the text fields when an option is selected from the second select box?

    Comment

    Working...
    X