Dynamically Creating An Element And Trying To Pass Its Value As A Parameter In A Function Onkeyup

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. I'

Solution 1:

Thanks for making me discover insertRow, rowIndex and insertCell!

Btw, you're complicating your life for nothing.

cell.innerHTML = '<input type="text" id="myInput'+id+'" value="hello world" onkeyup=" function(){ makeAjaxRequest( \'value='+this.value+'\' ) }" />';

Here is the correct way (DOM-compatible, without innerHTML evil, blablabla):

var input = document.createElement('input')
input.type = 'text'
input.id = 'myInput' + id
input.value = 'hello world'
input.onkeyup = function() {
    makeAjaxRequest(this.value) // this is how to make it work
}
cell.appendChild(input) // or use replaceChild depending on your needs

The problem when you pass 'value=' + this.value is that you're passing the following value: value=hello world.

The other problem is that for inline event handlers (like the onkeyup in the HTML) is that you don't need to wrap in a function. The following would work:

cell.innerHTML = '<input type="text" id="myInput'+id+'" value="hello world" onkeyup="makeAjaxRequest( this.value );" />';

I haven't tested, but I suspect that by wrapping in another function, the this is different. Thus why it can't work.

To avoid any ambiguity, don't use HTML event handlers.

Solution 2:

You can pass value like this :-

  urlData = "" ;
    postData = "vendorType=" + jQuery('#EnrollmentRoleId').val() + "&time=" + new Date().getTime();

    jQuery.ajax({
        url: urlData,
        data: postData,
        success: function(data) {
            //alert(data);
            jQuery('#EnrollmentVendorId').html(data);
            jQuery('#user_id_div').show();
            jQuery('#loading_image').hide();
        }
    });