Not able to create a table row from the check action of a dynamically created checkbox in javascript

Question

I am trying to create a row of a table on the check action of a checkbox which is created dynamically. The flow is not entering the function on the check event.

addCheckboxItems : function(form){
    var newBox = ('<input type="checkbox" name="checkBoxItem" onCheck="JavaScript:addRowItems(this)"; id="checkBoxItemId" value="' + form.combobox.value +'"'+ '>'+form.combobox.value);
    document.getElementById("divCheckbox").innerHTML = newBox;

    }
    addRowItems : function(element){
    alert('Hi');
    if(document.getElementById("checkBoxItemId").checked){
        var tableRef =  document.getElementById('tbl').getElementsByTagName('tbody')[0];
        var newRow   = tableRef.insertRow(tableRef.rows.length);
        var td1 = document.createElement("td")
        var strHtml1 = document.getElementById('checkBoxItemId').value;
        td1.innerHTML = strHtml1.replace(/!count!/g,count);

        var td2 = document.createElement("td")
        var strHtml2 = "NA";
        td2.innerHTML = strHtml2.replace(/!count!/g,count);

        var td3 = document.createElement("td")
        var strHtml3 = "<a>Remove</a>";
        td3.innerHTML = strHtml3.replace(/!count!/g,count);

        newRow.appendChild(td1);
        newRow.appendChild(td2);
        newRow.appendChild(td3);

        tableRef.appendChild(newRow);
    }
}

How can I achieve this.....Thanks in advance..

i really don't understand the first line of the question, pls edit or create a fiddle with your current code — , Jun 11 '15 at 10:29

score 0 · Answer 1 · answered Jun 12 '15 at 02:19

First of all your syntax gives an idea that you're creating functions in some object addCheckboxItems : function(form) but in your html event handlers onCheck search global scope for the function. So you should define functions like addCheckboxItems = function(form) in global scope.

Besides there is no oncheck event. There is onclick event.

Here is a jsfiddle with this corrections where you can get the idea (and debug) what I am talking about. It however crashes inside addRowItems because there is not enough context in your code the build a working app... But you got your handler running and can continue now

score 0 · Answer 2 · edited May 23 '17 at 12:30

Hi in your function can u try this

addCheckboxItems : function(form){
var newBox = ('<input type="checkbox" name="checkBoxItem"
onchange="JavaScript:addRowItems(this)"; 
id="checkBoxItemId" value="' + form.combobox.value +'"'+
 '>'+form.combobox.value);
 document.getElementById("divCheckbox").innerHTML = newBox;

}

I added the onchange event of the input element. This should do the trick.

EDIT

Also you can try with the onclick event of the checkbox. It seems that the change event behaves differently in IE, so many users prefer the click event which is fired post change in the state of the input element. You can refer Getting value of HTML Checkbox from onclick/onchange events

Not able to create a table row from the check action of a dynamically created checkbox in javascript

2 Answers2