Dynamic drop-down box generation in javascript using html - php

Question

i want to do a very simple thing. I want to populate the list of a drop-down box based on the value of the 1st drop-down box. So these 2 boxes are the only elements in a table, which creates rows dynamically(on the click of a button). I am a newbie in html.. and have almost spent 2 entire days in vain in this...
This is the code:
HTML Code:
<table border="1" id="areas">
<tr>
<th colspan="3">Areas Serviced</th>
</tr>
<tr>
<td>
<select name='city1' id='city1' onChange="dynamic1(this,'txtRow1');">
<option value="">Please select a city</option>
<option value='Bangalore'> Bangalore </option>
<option value='Mumbai'> Mumbai</option>
</select>
<option></option>
</td>
<td>
<select name="txtRow1" id="txtRow1">
<option value="">Please Select an area</option>
<option></option>
</select>
</td>
</tr>
</table>
<input type="button" value="Add another Area" onClick="addRowToTable();" /> <input type="button" value="Remove" onClick="removeRowFromTable();" />
</br>
</br>
<input type="submit" name="submit" id="submit" value="Submit" />
Javascript:
function dynamic1(parent,child){
var parent_array = new Array();
parent_array[''] = ['Please select a city'];
parent_array['Bangalore'] = ['Marathahalli','Kadubeesanahalli'];
parent_array['Mumbai'] = ['Andheri','Santacruz'];
var thechild = document.getElementById(child);
thechild.options.length = 0;
var parent_value = parent.options[parent.selectedIndex].value;
if (!parent_array[parent_value]) parent_value = '';
thechild.options.length = parent_array[parent_value].length;
for(var i=0;i<parent_array[parent_value].length;i++){
thechild.options[i].text = parent_array[parent_value][i];
thechild.options[i].value = parent_array[parent_value][i];} }
function addRowToTable()
{
var tbl = document.getElementById('areas');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
var col = document.createElement("TR");
var cell1 = document.createElement("TD");
var txt0= document.createTextNode(iteration);
var combo1=document.createElement("select");
var combo11=document.createElement("option");
var combo12=document.createElement("option");
var combo2=document.createElement("select");
var combo21=document.createElement("option");
var combo22=document.createElement("option");
var id2=combo2.id;
combo1.setAttribute("name","city");
combo1.setAttribute("onChange","dynamic1(this,id2);");
combo11.setAttribute("value","Bangalore");
combo11.innerHTML="Bangalore";
combo12.setAttribute("value","Mumbai");
combo12.innerHTML ="Mumbai";
combo2.setAttribute("name","area");
combo2.setAttribute("id","txtRow"+iteration);
combo1.appendChild(combo11);
combo1.appendChild(combo12);
combo2.appendChild(combo21);
combo2.appendChild(combo22);
var cell2 = document.createElement("TD");
cell2.appendChild(combo1);
var cell3 = document.createElement("TD");
cell3.appendChild(combo2);
col.appendChild(cell2);
col.appendChild(cell3);
tbl.appendChild(col);
}
function removeRowFromTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
This code does not work.
Alternate Javascript code:
function SetMedia(objCity,iteration) {
var objArea = document.getElementById("txtRow"+iteration);
objArea.options.length = 0;
objArea.disabled = false;
switch (objCity.value) {
case "Bangalore":
objArea.options.add(new Option("Marathahalli"));
objArea.options.add(new Option("Kadubeesanahalli"));
break;
case "Mumbai":
objArea.options.add(new Option("Andheri"));
objArea.options.add(new Option("Santacruz"));
break;
default:
objArea.options.add(new Option("select"));
objArea.disabled = true;
break;
}
}
function addRowToTable()
{
var tbl = document.getElementById('areas');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var col = document.createElement("TR");
var cell1 = document.createElement("TD");
var txt0= document.createTextNode(iteration);
var combo1=document.createElement("select");
var combo11=document.createElement("option");
var combo12=document.createElement("option");
var combo2=document.createElement("select");
var combo21=document.createElement("option");
var combo22=document.createElement("option");
combo1.id="city"+iteration;
var id1=combo1.id;
combo2.id="txtRow"+iteration;
var id2=combo2.id;
combo1.setAttribute("name","city");
combo1.onChange=func(){SetMedia(id1,iteration);}
combo11.setAttribute("value","Bangalore");
combo11.innerHTML="Bangalore";
combo12.setAttribute("value","Mumbai");
combo12.innerHTML ="Mumbai";
combo2.setAttribute("name","area");
combo2.setAttribute("id","txtRow"+iteration);
combo1.appendChild(combo11);
combo1.appendChild(combo12);
combo2.appendChild(combo21);
combo2.appendChild(combo22);
var cell2 = document.createElement("TD");
cell2.appendChild(combo1);
var cell3 = document.createElement("TD");
cell3.appendChild(combo2);
col.appendChild(cell2);
col.appendChild(cell3);
tbl.appendChild(col);
}
Basically, I am not able to link the dynamically created object(drop-down number 2) to drop-down number 1 since I am not able to get the 'id's of the elements dynamically generated...
After this, I also need to use these values entered in another php script using POST...

Answer 1

This part doesn't work. You can't write to the .length property of an array or collection.
thechild.options.length = 0;
var parent_value = parent.options[parent.selectedIndex].value;
if (!parent_array[parent_value]) parent_value = '';
thechild.options.length = parent_array[parent_value].length;
for(var i=0;i<parent_array[parent_value].length;i++){
thechild.options[i].text = parent_array[parent_value][i];
thechild.options[i].value = parent_array[parent_value][i];} }
replace with
while (thechild.options[0]) thechild.removeChild(thechild.options[0]);
var parent_value = parent.options[parent.selectedIndex].value;
if (parent_array[parent_value]) {
for(var i=0;i<parent_array[parent_value].length;i++){
var o = document.createElement('option');
o.text = parent_array[parent_value][i];
o.value = parent_array[parent_value][i];} }
thechild.appendChild(o);
}
}

Answer 2

In the first javascript you are attempting to read the id attribute of combo2 before you have set it.
In the second javascript you are just adding two empty options to the select element (combo2).