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


No announcement yet.

make an input field depend on 2 dynamic menus

  • 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
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Traditional Addresses</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <!-- 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" >
    									<h3>Choose The Appropraite Information :</h3>
    									<br />
    											<table id="tab">							
    													<td>City : </td>
    													<td> <font id=cities> <select ><option value="0">Choose one ...</option></select></font></td>
    													<td>Post Offic Or (Zip Code) : </td>
    													<td> <font id=post_office><select><option value="0">Choose one ...</option></select></font></td>
    <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
    													<td>P.O.Box : </td>
    													<td> <input align=middle type="text" name="p.o.box" value="" size="30"/></td>
    													<td>Enter the owner name (Optional): </td>
    													<td> <input align=middle type="text" name="owner_name" value="" size="30"/></td>
    												<td><br /></td>
    												<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>
    				<!-- end content -->
    				<!-- start sidebar -->
    				<div id="sidebar">
    							<h2><b>Site Language</b></h2>
    								<li><a href="#">English</a></li>
    								<li><a href="#">عربي</a></li>
    				<!-- end sidebar -->
    				<div style="clear:both">&nbsp;</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 
    <div style="clear:both">&nbsp;</div>
    and this is were the support file state.php
    //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");
    //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";                   
          $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?