please help, javascript dynamic checkboxes and events question

[scottSD]

Hi everyone. this is my first post here, but i've found quite a bit of great information from reading the forums in the past.

i'm not sure if what i'm trying to do is possible or not, but here it is:

i'm creating a dynamic list of checkboxes, basically to allow access to client information on a user by user basis. i use ajax to bring back a full list of clients, then loop through the list and create a checkbox for each client to basically create a checkboxlist. what i want: on each checkbox click to update the database with either added or removed client access. the problem is that the client can't seem to tell which checkbox was clicked.

here's my code:

 
        ...
        var sites = search.GetSiteList().value;
        for (var i = 0; i < sites.length; i++)
        {
            // user search site list
            sel.options.length++;
            sel.options[i].value = sites[i].split("-")[0];
            sel.options[i].text = sites[i].split("-")[1];
 
            if (i > 0) // skip "All"
            {
                // user site assignment list
                var clientId = sites[i].split("-")[0];
                el = document.createElement("input");
                el.type = "checkbox";
                el.id = clientId;
                el.onclick = function(){ChangeUserSiteAccess(clientId)};
                div.appendChild(el);
                div.appendChild(document.createTextNode(sites[i].split("-")[1]));
                div.appendChild(document.createElement("br"));
            }
        }
 

the problem is with creating the onclick event. it doesn't seem to create a different event for each checkbox. when i click a checkbox, the ID that is returned is always from the last checkbox that was created.

is there a way to determine which checkbox was clicked? some quick web searching has people normally looping through the entire list to check the .checked property. this is not a great solution for me since a person could have 25 clients selected and 600 unselected.

thanks in advance for any help.

[scottSD]

i figured it out. i used a function i found on the interweb for adding events:

// c&p from http://ejohn.org/projects/flexible-javascript-events/
function addEvent(obj, type, fn) 
{
    if (obj.attachEvent) 
    {
        obj['e' + type + fn] = fn;
        obj[type + fn] = function(){obj['e' + type + fn](window.event);}
        obj.attachEvent('on' + type, obj[type + fn]);
    } 
    else
        obj.addEventListener(type, fn, false);
}

and used it:

{
...
addEvent(document.getElementById(clientId), "click", ChangeUserSiteAccess);
...
}
 
function ChangeUserSiteAccess(e)
{
    var id = e.target.id;
    var checked = document.getElementById(id).checked;
    var userId = document.getElementById("hidUserId").value;
    var status = false;
    if (checked == true)
    {
        // item was checked.  save new site assignment for this user
        status = search.AddSiteForUser(id, userId);
    }
    else
    {
        // item was unchecked.  remove this site assignment for this user
        status = search.RemoveSiteForUser(id, userId);
    }
}

this was pieced together from a few other posts on this forum. thanks.

[acoder]

Welcome to TSDN!

Glad to hear that you managed to solve your problem and thanks for posting your solution.

Post again if you have any more questions not already answered somewhere within the forums that you can easily find.