I have a table in which rows can be added one by one,dynamically on clicking the 'addrow' button.Of the various cells in each row,three are drop down lists which are to be dynamic drop downs.That is, based on value selected in first drop down, the second drop down shud get populated.And based on the 1st and 2nd drop down's values, the third drop down shud get populated.Im encountering problem doing the 'dynamic dropdown' part. I am unable to read the value stored in first drop down using the DOM structure of documen.myform.name.value
The error being given is tht:
document.myform.txtRow10.value is either null or is not an object.
In short, Im unable to refer to any of the elements i just created.
Anyway to overcome this?
The code is:
function valueIs(value)
{
//document.myform.txtRow11.options[1].text='3';
var blid=document.myform.txtRow10.value;
// document.write(blid);
alert("IT is working! with value ");
}
function addRowToTable()
{
var jarr = new Array(191);
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
//First Cell for "Bldg No."
var cellOne = row.insertCell(0);
var e1 = document.createElement('select');
e1.setAttribute('name','txtRow' + iteration + '0');
e1.setAttribute('size','1');
e1.setAttribute('onchange',valueIs);
cellOne.appendChild(e1);
var jsarray = '<%=arr%>'; //ASP variable from which Im reading the data
temp = jsarray.split("|");
var e11 = document.createElement('option');
e11.innerText = 'Bld No';
e1.appendChild(e11);
for(j=1;j<temp.length;j++)
{
var e11 = document.createElement('option');
e11.innerText = temp[j];
e1.appendChild(e11);
}
// Second Cell for "Flr No"
var cellTwo = row.insertCell(1);
var e2 = document.createElement('select');
e2.setAttribute('name', 'txtRow' + iteration + '1');
e2.setAttribute('size', '1');
e2.style.backgroundColor="beige";
cellTwo.appendChild(e2);
var e21 = document.createElement('option');
e21.innerText = 'Flr No';
e2.appendChild(e21);
//Third Cell for "Rm No"
var cellThree = row.insertCell(2);
var e3 = document.createElement('select');
e3.setAttribute('name','txtRow' + iteration + '2');
e3.setAttribute('size','1');
cellThree.appendChild(e3);
var e31 = document.createElement('option');
e31.innerText = 'Rm No';
e3.appendChild(e31);
//Fourth Cell for "File Name"
var cellFour = row.insertCell(3);
var e4 = document.createElement('input');
e4.setAttribute('type','text');
e4.setAttribute('name','txtRow' + iteration + '3');
e4.setAttribute('size','7');
cellFour.appendChild(e4);
//Fifth Cell for "Revision Date"
var cellFive = row.insertCell(4);
var e5 = document.createElement('input');
e5.setAttribute('type','text');
e5.setAttribute('name','txtRow' + iteration + '4');
e5.setAttribute('size','10');
cellFive.appendChild(e5);
//Sixth Cell for "Project #"
var cellSix = row.insertCell(5);
var e6 = document.createElement('input');
e6.setAttribute('type','text');
e6.setAttribute('name','txtRow' + iteration + '5');
e6.setAttribute('size','10');
cellSix.appendChild(e6);
//Seventh Cell for "Update Issued By"
var cellSeven = row.insertCell(6);
var e7 = document.createElement('input');
e7.setAttribute('type','text');
e7.setAttribute('name','txtRow' + iteration + '6');
e7.setAttribute('size','15');
cellSeven.appendChild(e7);
//Eighth Cell for "Room Configuration Change"
var cellEight = row.insertCell(7);
var e8 = document.createElement('select');
e8.setAttribute('name','txtRow' + iteration + '7');
e8.setAttribute('size','1');
cellEight.appendChild(e8);
var e81 = document.createElement('option');
/////////////////////////////////////////
// HARDCODING THE DROP DOWN OPTIONS
////////////////////////////////////////
e81.innerText = 'NO';
e8.appendChild(e81);
var e81 = document.createElement('option');
e81.innerText = 'Walls';
e8.appendChild(e81);
var e81 = document.createElement('option');
e81.innerText = 'Doors/Windows';
e8.appendChild(e81);
var e81 = document.createElement('option');
e81.innerText = 'Cubicles';
e8.appendChild(e81);
//Ninth Cell for "Room Equipment Change"
var cellNine = row.insertCell(8);
var e9 = document.createElement('select');
e9.setAttribute('name','txtRow' + iteration + '8');
e9.setAttribute('size','1');
cellNine.appendChild(e9);
var e91 = document.createElement('option');
////////////////////////////////////////////
//HARDCODING THE DROP DOWN OPTIONS
////////////////////////////////////////////
e91.innerText = 'NO';
e9.appendChild(e91);
var e91 = document.createElement('option');
e91.innerText = 'Seating';
e9.appendChild(e91);
var e91 = document.createElement('option');
e91.innerText = 'Lab Equipment';
e9.appendChild(e91);
var e91 = document.createElement('option');
e91.innerText = 'Furniture';
e9.appendChild(e91);
e9.style.backgroundColor = 'beige';
//Tenth Cell for "Room No. Change"
var cellTen = row.insertCell(9);
var e10 = document.createElement('select');
e10.setAttribute('name','txtRow' + iteration + '9');
e10.setAttribute('size','1');
cellTen.appendChild(e10);
var e101 = document.createElement('option');
e101.innerText = 'NO';
e10.appendChild(e101);
var e101 = document.createElement('option');
e101.innerText = 'YES';
e10.appendChild(e101);
//Eleventh Cell for "Description"
var cellEleven = row.insertCell(10);
var eA = document.createElement('textarea');
eA.setAttribute('name','txtRow' + iteration + '10');
eA.setAttribute('rows','2');
eA.setAttribute('cols','15');
cellEleven.appendChild(eA);
}
function numRows()
{
var tbl = document.getElementById('tblSample');
var number = tbl.rows.length;
document.myform.count.value = number-1;
document.myform.submit();
}
</script>
</HEAD>
<BODY BGCOLOR="#EfEECB" >
<form name="myform" action="updatedb.asp?netid=<%=netid%>" method="post">
<input type="button" value="Add a new row" onclick="addRowToTable();" />
<BR><BR>
<table border="1" id="tblSample" align="center">
<thead><tr>
<TD ALIGN='CENTER'><B>BLDG No.</TD>
<TD ALIGN='CENTER'><B>FLR No.</TD>
<TD ALIGN='CENTER'><B>FILE NAME</TD>
<TD ALIGN='CENTER'><B>REVISION DATE<br></B>(mm/dd/yyyy)</TD>
<TD ALIGN='CENTER'><B>PROJECT #</B><br>(xxx-xxx-xx)</TD>
<TD ALIGN='CENTER'><B>UPDATE ISSUED BY</TD>
<TD ALIGN='CENTER'><B>ROOM CONFIGURATION CHANGE</TD>
<TD ALIGN='CENTER'><B>ROOM EQUIPMENT CHANGE</TD>
<TD ALIGN='CENTER'><B>ROOM No.CHANGE</TD>
<TD ALIGN='CENTER'><B>DESCRIPTION</TD>
</thead></tr>
</table>
<BR><BR>
<P>
<input type="hidden" name="count" value ="">
<input type="button" name="Submit" value="Submit Updates" onClick="numRows()">
</P>
</form>
</BODY>
</HTML>
TIA
Help with dynamic select in dynamic table
Linear Mode
