Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
Old September 6th, 2005, 04:14 PM
Authorized User
Join Date: Dec 2004
Posts: 17
Thanks: 0
Thanked 0 Times in 0 Posts
Default Setting onChange Event w/Dynamically Created Form

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;
    if(elem.type != "checkbox") { tobeSavedPlacement[elemID] = elem.value; }
    else if (elem.checked) { tobeSavedPlacement[elemID] = elem.value; }
    else { tobeSavedPlacement[elemID] = ""; }

    //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;
        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("id","assignment_done~" + count);

        //and append the checkbox to the table cell
        //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.setAttribute("value",first_select.option s[i].value);

        var input1 = document.createElement("input");
        input1.setAttribute("id","assign_memo~" + count);

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

        var assign_done = document.getElementById("assignment_done~" + count).onclick="saveAssign(this)";
        var rec_assign = document.getElementById("rec_assign~" + count);
        rec_assign.onchange = "saveAssign(this)";
        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.
Old September 6th, 2005, 04:35 PM
Authorized User
Join Date: Dec 2004
Posts: 17
Thanks: 0
Thanked 0 Times in 0 Posts

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.
Old December 27th, 2005, 11:35 AM
Registered User
Join Date: Dec 2005
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts

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!

Old February 8th, 2007, 03:57 PM
Registered User
Join Date: Feb 2007
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts

could you guys mind posting the whole solution? thanks
Old June 28th, 2007, 08:10 AM
Registered User
Join Date: Jun 2006
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts

The following two lines are enough.

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

Similar Threads
Thread Thread Starter Forum Replies Last Post
onChange event mcinar HTML Code Clinic 3 May 24th, 2007 08:46 PM
onChange Event mcinar Javascript 11 May 11th, 2007 09:38 AM
Event:OnChange catchrohith Classic ASP Basics 0 November 3rd, 2006 12:52 AM
Event creation for dynamically created controls sk80 Pro VB 6 2 February 7th, 2006 07:55 AM
Setting stylesheet for dynamically created object tgopal Javascript 2 September 6th, 2004 11:47 PM

Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.