Thread: Creating select box dynamically- onchange fired before selection

Hi,

I need to create a select box on the click of a button using javascript. While creating the select box, I need to provide a function call for onchange event. The issue is that, the funtion gets invoked as soon as the select box gets added dynamically on button click. The source code on the rendered page has onchange="undefined".Below is my code:

function addRowToTable(form, responseObj) {
	if (responseObj.length <= 0) {
		alert("Devices Not Available");
		return;
	} 
		var tbl = document.getElementById('deviceTable');
		var lastRow = tbl.rows.length;
		// if there's no header row in the table, then iteration = lastRow + 1
		var iteration = lastRow;
		alert('iteration'+lastRow);
		var row = tbl.insertRow(lastRow);
		if (lastRow % 2 != 0) {
			row.className = "oddrow";
		} else {
			row.className = "evenrow";
		}
		// left cell
		var cellLeft = row.insertCell(0);
		cellLeft.className = "rowtd";
		var textNode = document.createTextNode(iteration);
		cellLeft.appendChild(textNode);
 
		var cellRightSel = row.insertCell(1);
		cellRightSel.className = "rowtd";
		var sel = document.createElement('select');
		sel.name="deviceType"+lastRow;
		sel.id="deviceType"+lastRow;
		var selectId="deviceType"+lastRow;
 
		for ( var x = 0; x < responseObj.length; x++) {
			var twt = responseObj[x];
			addOption1(sel, twt, twt, x);
		}
		sel.setAttribute("onchange", fetchUnMappedDeviceMake(selectId);});
 
		cellRightSel.appendChild(sel);
 
}

Kindly help me to resolve this.


Thanks in advance.

Veronica