Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with dynamic select box error

    Hello all! I am hoping for some coding help as I have been trying to figure out my problem for a couple of days without resolve. I am new to Javascript so this is just test code that eventually will go into a larger project. Here goes:

    I have a form that initially creates two select boxes. The 2nd select box option values are determined onchange of the first boxes value using mysql to pull the data from a database. That all works fine.

    I also have an add button that adds a second set of select boxes dynamically and assigns names and values, etc. This also works fine. My goal is to have the 2nd set of select boxes act the same as the first so that when an option is chosen in the first box the 2nd dynamically populates. This does not work. The first box is created fine but when it tries to create the values in the 2nd from an onchange event I have a problem.

    This is the code that returns a valid object with the first set of select boxes but is null with the 2nd set.
    Code:
    var selbox = document.getElementById(exep);
    The entire piece of spaghetti code is below. Any help is appreciated. Please be nice as I am still trying to figure out this Javascript stuff. Thanks for any help...

    Code:
    <html> 
    <head> 
    <title>Workout testing</title>  
        <SCRIPT language="javascript"> 
            function deleteRow(tableID) { 
                try { 
                var table = document.getElementById(tableID); 
                var rowCount = table.rows.length; 
      
                for(var i=0; i<rowCount; i++) { 
                    var row = table.rows[i]; 
                    var chkbox = row.cells[0].childNodes[0]; 
                    if(null != chkbox && true == chkbox.checked) { 
                        if(rowCount <= 1) { 
                            alert("Cannot delete all the rows."); 
                            break; 
                        } 
                        table.deleteRow(i); 
                        rowCount--; 
                        i--; 
                    } 
      
                } 
                }catch(e) { 
                    alert(e); 
                } 
            } 
      
        </SCRIPT>
    <script language="javascript">
    
    
    function setOptions(chosen, form_num) {
    
    var musc = "musc_"+form_num;
    var exep = "exep_"+form_num;
    
    //var str = '';
    //        var elem = document.getElementById('form1').elements;
    //        for(var i = 0; i < elem.length; i++)
    //        {
    //            str += "<b>Type:</b>" + elem[i].type + "&nbsp&nbsp";
    //            str += "<b>Name:</b>" + elem[i].name + "&nbsp;&nbsp;";
    //            str += "<b>Value:</b><i>" + elem[i].value + "</i>&nbsp;&nbsp;";
    //            str += "<BR>";
    //        } 
    
    // document.getElementById('lblValues').innerHTML = str;
    
    var selbox = document.getElementById(exep); 
    
      selbox.options.length = 0; 
      if (chosen == "0") { 
        selbox.options[selbox.options.length] = new Option('First select a muscle group','0'); 
        
      } 
      <? 
      $car_result = mysql_query("SELECT muscle FROM work_muscle") or die('Something is wrong: ' . mysql_error()); 
      while(@($c=mysql_fetch_array($car_result))) 
      { 
      ?> 
        if (chosen == "<?=$c['muscle'];?>") {  
        <? 
        $c_id = $c['muscle']; ;
        $mod_result = mysql_query("SELECT exercise FROM work_exercise WHERE muscle='$c_id'") or die('Something is wrong: ' . mysql_error()); 
        while(@($m=mysql_fetch_array($mod_result))) 
        { 
        ?> 
          selbox.options[selbox.options.length] = new 
          Option('<?=$m['exercise'];?>','<?=$m['exercise'];?>'); 
        <? 
        } 
        ?> 
        } 
      <? 
      } 
      ?> 
    } 
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>create DOM table</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <script type="text/javascript">
    function makeTable() {
    //give the new table unique name
    var form_num = document.getElementsByTagName("table").length;
    
    	row=new Array();
    	cell=new Array();
    
    	row_num=1; //edit this value to suit
    	cell_num=6; //edit this value to suit
    
    	tab=document.createElement('table');
    	var table_id = 'newtable_'+form_num;
    
    	tab.setAttribute('id',table_id);
    
    	tbo=document.createElement('tbody');
    
    	for(c=0;c<row_num;c++){
    		row[c]=document.createElement('tr');
    
    		for(k=0;k<cell_num;k++) {
    			cell[k]=document.createElement('td');
    			//cont=document.createTextNode((c+1)*(k+1))
    			//cell[k].appendChild(cont);
    			row[c].appendChild(cell[k]);
    		}
    		tbo.appendChild(row[c]);
    	}
    	tab.appendChild(tbo);
    	document.getElementById('mytable').appendChild(tab);
    	changeBorder(table_id, form_num);
    }
    
    function changeBorder(table_id, form_num){
        document.getElementById(table_id).border="1";
    	pop_cells(table_id, form_num);
    
    }
    function pop_cells(table_id, form_num) { 
    
    	var table = document.getElementById(table_id); 
      
            var colCount = table.rows[0].cells.length;
    	//create the first checkbox
    	var selcheck = document.createElement("input");
    	selcheck.type = "checkbox";
    	selcheck.name = "chk[]";
    
    	//create the first select box
    	var selbox = document.createElement("select");	
    	var musc_opt = "musc_"+form_num;
    	selbox.name = "musc_"+form_num;
    	selbox.id = "id_"+form_num;
    	//var test_ops = javascript:setOptions(document.form1.'+musc_opt+'.options [document.form1.'+musc_opt+'.selectedIndex].value,'+selbox.name+');
    	//selbox.setAttribute("onchange", function(){setOptions(test_ops);});
    	selbox.onchange = function(){setOptions(this.value,form_num);};
    	selbox.options[selbox.options.length] = new Option('Select a muscle group','0');  
    	<? 
    	$car_result = mysql_query("SELECT muscle FROM work_muscle") or die('Something is wrong: ' . mysql_error()); 
    	while(@($c=mysql_fetch_array($car_result))) {
    	?>
    		selbox.options[selbox.options.length] = new Option('<?=$c['muscle'];?>','<?=$c['muscle'];?>'); 
    	<? 
    	} 
    	?> 
    	//create the 2nd select box
    	var selbox2 = document.createElement("select");	
    	selbox2.name = "exep_"+form_num;
    	selbox2.id = "id_"+form_num;
    	selbox2.size = "1";
    	selbox2.options[selbox2.options.length] = new Option('First select a muscle group','0');  
    	//<? 
    	//$car_result = mysql_query("SELECT exercise FROM work_exercise") or die('Something is wrong: ' . mysql_error()); 
    	//while(@($c=mysql_fetch_array($car_result))) {
    	//?>
    	//	selbox2.options[selbox2.options.length] = new Option('<?=$c['exercise'];?>','<?=$c['exercise'];?>'); 
    	//<? 
    	//} 
    	//?> 	
    	
    	var target0 = table.rows[0].cells[0];
    	var target1 = table.rows[0].cells[1];
    	var target2 = table.rows[0].cells[2];
    	// fire
    	target1.appendChild(selcheck);
    	target1.appendChild(selbox);
    	target1.appendChild(selbox2);
    } 
    
    </script>
    </head>
    <body> 
    <form name="form1"><div align="center">
        <INPUT type="button" value="Add Row" onclick="makeTable()" /> 
      
        <INPUT type="button" value="Delete Row" onclick="javascript:deleteRow(this)" /> 
        <TABLE id="newtable" width="350px" border="1"> 
            <TR><TD><INPUT type="checkbox" name="chk[]"/></TD>
    <td><select name="musc_0" size="1" 
    onchange="javascript:setOptions(document.form1.musc_0.options 
    [document.form1.musc_0.selectedIndex].value, 0);"> 
    <option value="0" selected>Select a muscle group</option>
    <? 
    $result = mysql_query("SELECT * FROM work_muscle") or die(mysql_error()); 
    while(@($r=mysql_fetch_array($result))) 
    { 
    ?> 
      <option value="<?=$r['muscle'];?>"><?=$r['muscle'];?></option> 
    <? 
    } 
    ?> 
    </select></td>
    <td> 
    <select name="exep_0" size="1"> 
    <option value=" " selected>First select a muscle group</option> 
    </select></td></tr> 
    </div></table><div id="mytable"></div><div id="lblValues"></div>
    </form> 
    </body> 
    </html>

  • #2
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anyone have any ideas? I still cant get it to work. Merry Christmas to all!!!


  •  

    Posting Permissions

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