I am working on a javascript that creates a new row at the end of a table with several form elements in each table cell. Each of those elements needs to have an onchange or onclick event added to them so that a function will be called that stores the data. So far, I've been unsuccessful after several hours of research on the 'net.

I've tried attachEvent, addEventListener and the plan element.onchange = function name. None of those are working.

Here is the function name. Everything works except when I enter new information into the newly created form element, the onchange function does not get called.


Here is the function
function saveAssign(elem) {
    var elemID = elem.id;
    alert(elem.id);
    if(elem.type != "checkbox") { tobeSavedPlacement[elemID] = elem.value; }
    else if (elem.checked) { tobeSavedPlacement[elemID] = elem.value; }
    else { tobeSavedPlacement[elemID] = ""; }

    dispNumSave();
    //check if another row needs to be added
    var elemParts = elemID.split("~");
    var countElem = document.getElementById('assign_count');
    alert("elemParts[1] = " + elemParts[1] + " and countElem.value = " + countElem.value);
    if (elemParts[1] == countElem.value) {

        //add one to the count
        var count = (elemParts[1] * 1) + 1;
        alert(count);
        countElem.value = count ;

        //get the table element
        var tableElem = document.getElementById('assignment_list')
        //create a new TR element
        var tbody = document.createElement('tbody');
        var tr = document.createElement("tr");
        //create the first table cell
        var td1 = document.createElement("td");
        //create the done check box
        var ck = document.createElement("input");
        //and set it's attributes
        ck.setAttribute("type","checkbox");
        ck.setAttribute("value","1");
        ck.setAttribute("id","assignment_done~" + count);

        //and append the checkbox to the table cell
        td1.appendChild(ck);
        tr.appendChild(td1);
        //create the second table cell
        var td2 = document.createElement("td");
        //create the select box that will be in the table sell
        var select = document.createElement("select");
        //set the select's id
        select.setAttribute("id","rec_assign~" + count);

        //now get the first select object's options
        var first_select = document.getElementById("rec_assign~" + 1);
        for(i=0;i<first_select.options.length;i++) {
            theOption = document.createElement("option");
            theText=document.createTextNode(first_select.optio ns[i].text);
            theOption.appendChild(theText);
            theOption.setAttribute("value",first_select.option s[i].value);
            select.appendChild(theOption);
        }

        td2.appendChild(select);
        tr.appendChild(td2);
        var input1 = document.createElement("input");
        input1.setAttribute("type","text");
        input1.setAttribute("id","assign_memo~" + count);
        input1.setAttribute("size","20");

        td3 = document.createElement("td");
        td3.appendChild(input1);
        tr.appendChild(td3);
        tbody.appendChild(tr);
        //alert("About to append the row " + tr.innerHTML);
        tableElem.appendChild(tbody);

        var assign_done = document.getElementById("assignment_done~" + count).onclick="saveAssign(this)";
        var rec_assign = document.getElementById("rec_assign~" + count);
        rec_assign.onchange = "saveAssign(this)";
        alert(rec_assign.onchange);
        document.getElementById("assign_memo~" + count).onchange="saveAssign(this)";
    }
}
//end of function

The onchange function I'm trying to call is the same one that generates the new table and form elements. The code alert(rec_assign.onchange); shows that saveAssign(this) is assigned to the onchange event but nothing happens when I actually change the value of the element.

Thanks for your help.

Because I hate it when people post problems on a site and don't give an answer when they figure it out, I'm posting my solution. Of course the solution comes only a few minutes after I posted this topic. Oh well :p

What I did was create a generic function that called the saveAssign function.

So at the end where I'm busy assigning the onchange functions I did this

var onchangeFunction = new Function("","var elem = document.getElementById('rec_assign~" + count + "'); saveAssign(elem);");
rec_assign.onchange = onchangeFunction

This fixed the problem.

Thank you very very very much for posting the solution... i was in a similar mess and the solution really saved lot of rnd.
Thanks again!

could you guys mind posting the whole solution? thanks

The following two lines are enough.


var elementId = document.getElementById('rec_assign~" + count + "');
elementId.onchange = "saveAssign(elementId);";