#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. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,959
    Rep Power
    1014
    Hi,

    I'm still waiting for the phrase "It doesn't work" to be blacklisted ...

    What does "not work" mean? Does your browser crash as soon as you open the page? Do you get an error message? A blank screen? Does the next selection box not appear? Does it not contain the right values?

    I mean, you do realize that we're not sitting in front of your computer, right? This means we cannot see what you see. If you don't provide a concrete error description, we'd have to set up our own testing environment -- and I'm pretty sure few people are willing to do that.

    Also, please do some basic debugging on your own and tell us the results. The PHP processing on the server and the JavaScript processing in the browser are two completely separate parts, which means you can (and should) check them separately:
    Code:
    1. Does PHP generate the correct output?
    	-> Yes:
    		We don't need your PHP. Post the resulting HTML and go on with 2.
    	-> No:
    		Which PHP snippet fails? Is it a syntax error, a wrong query, the wrong HTML/JavaScript syntax ...?
    		
    2. If the output itself is correct, what's the exact problem with the JavaScript?
    	- Does the JavaScript console show an error?
    	- Do the event handlers get called and receive the correct arguments? (console_log() will help)
    	- Do the handlers work operate with the correct elements? (console_log() again)
    	- ...
    As you can see, you can tell us a lot more than just "It doesn't work" (which means absolutely nothing).

    In any case, note that your code has several security holes. You need to escape your data before you can use it in queries or output it. Check the link in my URL.

    Also note that your HTML is invalid. You can't have a script above the html element (this is the root node). You need a head element with a title etc. Most browsers will render broken HTML as good as they can, but this can lead to unexpected results.
    The 6 worst sins of security ē How to (properly) access a MySQL database with PHP

    Why canít I use certain words like "drop" as part of my Security Question answers?
    There are certain words used by hackers to try to gain access to systems and manipulate data; therefore, the following words are restricted: "select," "delete," "update," "insert," "drop" and "null".
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    3
    Rep Power
    0
    Hi,

    There is no problem with the PHP codes as I am able to query all the data correctly from the database.

    As for the javascript, I am not really too sure how to debug. I tried the debug console (F12), and I will get the following error after I added a new row and try to select the options.
    Unable to set value of the property 'length': object is null or undefined

    From my output, when the website is loaded, user will only see 1 row with 3 column of fields. The following result shows correctly on the 1st row.
    1. Category (by default will show all the options)
    2. Vendor (only will show the respective options when user selects a corresponding category)
    3. Product (only will show the respective options when user selects a corresponding vendor).

    However, if user click on "Add" button to add new row, all the options value will show the same as 1st row (eg. category will still shows all options, vendor will have options depend on what user selects the category in 1st row, product will have options depend on what user selects the vendor in 1st row ). And also when I tried to change the category options, drop down option in vendor does not shown accordingly, it will remain the same options value as what user select in category in 1st row.

    All these happen only when I tried to add a new row.

    Resulting HTML:
    Code:
    <html>
    <head>
    <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('','');   
           } 
    
           if(vname==1){
    					
           selbox1.options[selbox1.options.length] = new Option('Dell','1');
           selbox1.options[selbox1.options.length] = new Option('HP','2');
          }
    
           if(vname==2){
           selbox1.options[selbox1.options.length] = new Option('Reurion','3');
           }	
          	
    }
    
    function showfield1(pname){
           var myForm = document.forms.myform;
           var selbox=myForm.elements["product[]"];
    	
           selbox.options.length = 1;
    	
              if(pname==1){
    						
    	selbox.options[selbox.options.length] = new Option('New Inspiron 15','1');
                 selbox.options[selbox.options.length] = new Option('Customizable XPS 8500','2');		
             }
    
             if(pname==2){
    						
    	selbox.options[selbox.options.length] = new Option('HP 200t-2c00','3');
    						
             }
    
            if(pname==3){
    						
    	selbox.options[selbox.options.length] = new Option('Cardboard 123','4');
    						
             }
            
    }
    </script>
    
    </head>
    
    <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>
                 <option value="1">PC</option>
                 <option value="2">Furniture</option>	
          </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>

IMN logo majestic logo threadwatch logo seochat tools logo