View Full Version : Help with dynamic select box error

12-23-2010, 05:04 PM
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.

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...

<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.");

}catch(e) {

<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());
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());
selbox.options[selbox.options.length] = new
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
<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

var table_id = 'newtable_'+form_num;




for(k=0;k<cell_num;k++) {
changeBorder(table_id, form_num);

function changeBorder(table_id, form_num){
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

<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"
[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());
<option value="<?=$r['muscle'];?>"><?=$r['muscle'];?></option>
<select name="exep_0" size="1">
<option value=" " selected>First select a muscle group</option>
</div></table><div id="mytable"></div><div id="lblValues"></div>

12-24-2010, 06:25 PM
Anyone have any ideas? I still cant get it to work. Merry Christmas to all!!!