Dynamically creating an element and trying to pass its value as a parameter in a function onkeyup
<p>I am adding a row to a table.  In one of the cells in the row is an input which I want to make an ajax call.  However, I am having a problem with passing the value of the input.</p>

<p>I've illustrated the problem here:</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;script language="javascript"&gt;
function addElement(){
    var id = 0;
    var tbl = document.getElementById('myTable');
    var rowInd = document.getElementById('row1').rowIndex;
    rowInd++;
    var row0 = tbl.insertRow( rowInd );
    var cell = row0.insertCell(0);
//  cell.innerHTML = '&lt;input type="text" id="myInput'+id+'" value="hello world" onkeyup="alert( '+this.value+' );" /&gt;';
    // acts as expected:  hello world
//  cell.innerHTML = '&lt;input type="text" id="myInput'+id+'" value="hello world" onkeyup="makeAjaxRequest( \'value='+this.value+'\' )" /&gt;';
    // Outputs:  value=undefined
    var theId = "myInput"+id;
//  cell.innerHTML = '&lt;input type="text" id="myInput'+id+'" value="hello world" onkeyup="makeAjaxRequest( \'value='+document.getElementById( theId ).value+'\' )" /&gt;';
    // Output:  Object required
cell.innerHTML = '&lt;input type="text" id="myInput'+id+'" value="hello world" onkeyup=" function(){ makeAjaxRequest( \'value='+this.value+'\' ) }" /&gt;';
     // Nothing happens
}

function makeAjaxRequest( val ){
    alert( val );
}
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;span onclick="addElement()"&gt;
Click me
&lt;/span&gt;
&lt;br /&gt;&lt;br /&gt;
&lt;table id="myTable"&gt;
    &lt;tr id="row1"&gt;&lt;td&gt;hello&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>It's going straight to an ajax call, so I need to be able to access either the object or the value so that I do my search.  Any help is appreciated.</p>
