#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    3
    Rep Power
    0

    Dependent Drop down list


    Hi,

    I have created a table where by default only will show the column header and the first row for user to input (include textbox and drop down list). When user click "Add" button another row will appear.

    I would like to do a triple dependent drop down list (meaning if user click on category (eg. PC) > all the vendor will appear in another drop down list that is related to PC. When click on vendor (eg. HP), all the HP product will show in another drop down list).

    For default 1st row, the codes below works but if I click "Add" button, the dependent drop down list will not be working.

    I have been troubleshooting this for few weeks, can someone please kindly help? Thanks.

    My Database Design:
    Table name ("category")
    - Field name ("id",categoryname)
    Example:
    - 1st record ("1", "PC")
    - 2nd record ("2", "Furniture")

    Table name ("vendor")
    - Field name ("id","vendorname","categoryid")
    Example:
    - 1st record ("1", "Dell", "1")
    - 2nd record ("2", "HP", "1")
    - 3rd record ("3", "Reurion", "2")

    Table name ("product")
    - Field name ("id","productname","vendorid")
    Example:
    - 1st record ("1", "New Inspiron 15", "1")
    - 2nd record ("2", "Customizable XPS 8500", "1")
    - 3rd record ("3", "HP 200t-2c00", "2")
    - 4th record ("4", "Cardboard 123", "3")

    Code:
    <script type="text/javascript">
    
    function addInput(){
    	var tbl = document.getElementById('tblAddress');
    	var lastRow = tbl.rows.length;
    	var row = tbl.rows[lastRow-1].cloneNode(true);
    	tbl.tBodies[0].appendChild(row);
    	var txts = row.getElementsByTagName('input');
    	for(var i = 0; i < txts.length; i++){
    		if(txts[i].type == "text") {
    			txts[i].value = "";
    		}
    	}
    }
    
    function showfield(vname){
    
           var myForm = document.forms.myform;
           var selbox1=myForm.elements["vendor[]"];
           var selbox2=myForm.elements["product[]"];
    	
           selbox1.options.length = 1;
           selbox2.options.length = 0;
    	
           if (vname == "") { 
                  selbox2.options[selbox2.options.length] = new Option('','');   
           } 
    		
          <?php
                  $catresult=mysql_query("SELECT * FROM category");
                  while ($catrow=mysql_fetch_array($catresult)){
           ?>
                      if(vname==<?php echo $catrow["id"]; ?>){
    					
           <?php
                         $catid=$catrow["id"];
                         $vendresult=mysql_query("SELECT * FROM vendor WHERE categoryid='$catid'");
                         while ($vendrow=mysql_fetch_array($vendresult)){
           ?>
                                  selbox1.options[selbox1.options.length] = new Option('<?php echo $vendrow["vendorname"]; ?>','<?php echo $vendrow["id"]; ?>');
    							
          <?php
                          }					
           ?>
    				
    	      }
          <?php
    	   }
          ?>		
    }
    
    function showfield1(pname){
           var myForm = document.forms.myform;
           var selbox=myForm.elements["product[]"];
    	
           selbox.options.length = 1;
    	
           <?php
    	$vendresult=mysql_query("SELECT * FROM vendor");
    	while ($vendrow=mysql_fetch_array($vendresult)){
           ?>
    	     if(pname==<?php echo $vendrow["id"]; ?>){
    						
    	        <?php
    		    $vendid=$vendrow["id"];
    		    $prodresult=mysql_query("SELECT * FROM product WHERE vendorid='$vendid'");
    		     while ($prodrow=mysql_fetch_array($prodresult)){
    	        ?>
    			selbox.options[selbox.options.length] = new Option('<?php echo $prodrow["productname"]; ?>','<?php echo $prodrow["id"]; ?>');
    								
    	       <?php
    		      }
                         ?>
    					
    	         }
            <?php
    	      }
            ?>
    }
    </script>
    
    <html>
    <body>
    
    <form name="form" method="post" action="" id="myform" >
    <table border="1" id="tblAddress">	
    <tr>	
    <td>
         <select name="category[]" onchange="showfield(this.options[this.selectedIndex].value)">
    	<option value=""></option>
    	<?php					
                      $resultcategory = mysql_query("SELECT * FROM category");
                      while ($rowcategory = mysql_fetch_array($resultcategory)){
    	?>
                     <option value="<?php echo $rowcategory['id']; ?>"><?php echo $rowcategory['categoryname']; ?></option>
    	<?php
    	      }
    	?>
          </select>
    </td>
    
    <td>
             <select name="vendor[]" onchange="showfield1(this.options[this.selectedIndex].value)">
    	 <option value=""></option>
             </select>				
    </td>
    
    <td>
           <select name="product[]">
                 <option value=""></option>
           </select>				
    </td>
    </tr>
    </table>
    <input type="button" value="Add" onclick="addInput();">
    </form>
    
    </body>
    </html>
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    74
    Rep Power
    18

IMN logo majestic logo threadwatch logo seochat tools logo