Dynamically created table rows w/ fields, onKeyUp / onChange problem

Hello, just joined the forums.

Anyway, I've been having an odd problem that has been causing me to lose some hair. I've been trying to learn JavaScript so this may be a simple syntax error.

I have a form for submitting invoice items, the form has 4 fields.

HTML code;

<table width="100%" border="0" cellspacing="1" cellpadding="0" id="item_table">
				            <tr>
				              <th width="3%" align="center" valign="top" bgcolor="#FF9900">#</th>
				              <th width="12%" align="center" valign="top" bgcolor="#FF9900">Product Code </th>				              
				              <th width="12%" align="center" valign="top" bgcolor="#FF9900">Cost Per Unit </th>
				              <th width="12%" align="center" valign="top" bgcolor="#FF9900">Case Cost </th>
				              <th width="12%" align="center" valign="top" bgcolor="#FF9900">Received </th>
				              <th width="49%" align="center" valign="top" bgcolor="#FF9900">Item Description </th>				              
				            </tr>
				            <tr>
				              <td align="center" valign="middle">0</td>
				              <td align="center" valign="top"><label>
				                <input name="item_num_0" type="text" id="item_num_0" size="8" onchange="javascript:checkProdCode('0')"/>
				              </label></td>
				              
				              <td align="center" valign="top"><label>
				                <input name="cost_per_unit_0" type="text" id="cost_per_unit_0" size="8" />
				              </label></td>
				              <td align="center" valign="top"><label>
				                <input name="case_cost_0" type="text" id="case_cost_0" size="8" />
				              </label></td>
				             
				              <td align="center" valign="top"><label>
				                <input name="item_received_0" type="text" id="item_received_0" size="8" />
				              </label></td>
				              <td align="center" valign="top">&nbsp;</td>
				            </tr>
				          </table>

Code (markup):

(This is a snippet of the main HTML code.)

After the last row, there is a link to add another row. This is working ( I think ) correctly, as it calls the function and adds another row.

Javascript code:

function addRow() 
{
	var tbl = document.getElementById('item_table');
	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 bgcol = '#FFFFFF';
	
	if (((iteration-1)%2) == 1) {
		bgcol = '#FFEEAA';
		
	}   
		
	
	var cellLeft = row.insertCell(0);
	row.align	 = 'center';
	row.valign	 = 'middle';
	row.style.backgroundColor    = bgcol;
	
	var textNode = document.createTextNode(iteration-1);
	cellLeft.appendChild(textNode);
	
	//item nmb
	var item_num = row.insertCell(1);
	var im       = document.createElement('input');	
	im.type      = 'text';	
	im.name      = 'item_num_' + (iteration-1);
	im.id        = 'item_num_' + (iteration-1);
	[B]im.onChange  = checkProdCode(iteration-1);[/B]
	im.size      = 8;	
	item_num.appendChild(im);
	
	//pack
	var item_pack = row.insertCell(2);
	var ip       = document.createElement('input');
	ip.type      = 'text';
	ip.name      = 'cost_per_unit_' + (iteration-1);
	ip.id        = 'cost_per_unit_' + (iteration-1);
	ip.size      = 8;
	item_pack.appendChild(ip);
	
	//costpr
	var item_pr = row.insertCell(3);
	var pr       = document.createElement('input');
	pr.type      = 'text';
	pr.name      = 'case_cost_' + (iteration-1);
	pr.id        = 'case_cost_' + (iteration-1);
	pr.size      = 8;
	item_pr.appendChild(pr);	
	
	//received
	var item_received = row.insertCell(4);
	var re       = document.createElement('input');
	re.type      = 'text';
	re.name      = 'item_received_' + (iteration-1);
	re.id        = 'item_received_' + (iteration-1);
	re.size      = 8;
	item_received.appendChild(re);
	
	//desc
	var description_cell = row.insertCell(5);	  

}

function takeInput(frm) {
	frm.submit();	
}

function checkProdCode(num) {
		
	var prodCodeBox = document.getElementById('item_num_' + num + '');
	alert("called.");
	if (prodCodeBox != null) {
		var prodCode = prodCodeBox.value;
		alert('Checking ' + prodCode);
	}
	
}

Code (markup):

Like I said, the script is correctly adding rows, however, when the new row is created, the function checkProdCode is called, and is never called again, even after the user has changed the text box.

I have searched for hours for a solution to no avail. Any help would be greatly appreciated.

 

I solved my own problem. In the event someone else runs into this same issue:

//im.onChange  = checkProdCode(iteration-1);
im.onChange = "checkProdCode('" + (iteration-1) + "')";
	var onChangeHandler = new Function(im.onChange);
	
	if (im.addEventListener) {
		im.addEventListener('change', onChangeHandler, false);
				
	} else if (im.attachEvent) {
		im.attachEvent('onchange', onChangeHandler);	
	}

Code (markup):

I created a general function to call the event 'onchange'. Seems to work.