Dynamically create checkbox based on the output in the responseText from server

[sarega]

Hi,
Here I have an array returned that is returned in responseText from the server. Based on the output that is returned by the server I have to dynamically create a checkbox.

function StateChanged() {
if(xmlHttp.readyState == 4) {
xyz=xmlHttp.responseText;
if(xyz!="false") {
alert("true");
Here I have to add a function to create a checkbox 
}
}
}

Somebody please help me??
I was trying to use document.create Element() but it did not work.
Thanks

[Dormilich]

you probably didn't append the created element to the document tree?

[sarega]

now am able to create a checkbox if a button is clicked. I wanted to check whether that particular checkbox if clicked another javascript function has to be evoked, am not able to figure out how to do that...

[Dormilich]

something like

document.getElementById(checkbox_id).addEventListener("click", callback_function, false);
// "change" instead of "click" should work too
// does not work in IE, workarounds available

[sarega]

Is there a possibility to add a text next to the dynamically created checkbox

[sarega]

And also onclick of the checkbox can we find is the checkbox been checked or unchecked

[Dormilich]

Is there a possibility to add a text next to the dynamically created checkbox

yes

And also onclick of the checkbox can we find is the checkbox been checked or unchecked

yes

(for the sake of 20 chars)

[sarega]

Can we pass arguments to the callback function in the eventlistener

[Dormilich]

not directly, you have three options:

1. use a closure. the parameter must be known at closure creation time
   

   function parent_function(elem, param)
   {
       var temp = function() { callback_with_param(param); }
       elem.addEventListener("click", temp, false);
   }

2. use a property of the used element
   

   function callback()
   {
       var my_var = this.param;
       // do cool stuff here using my_var
   }
   
   function myFunc(elem, para);
   {
       elem.param = para;
       elem.addEventListener("click", callback, false);
   }

3. use an anonymous function. this event can not be removed!
   

   elem.addEventListener("click", function() { yourFunc(param); }, false);

[sarega]

I have dynamically added many checkboxes to the form and each of the checkboxes have different name,id and value. When the form is submitted how can I retrieve only those checkboxes which have been checked? The number of checkboxes in the form will vary everytime.
I will have something like this if i try to print all the posted values in the form
[red] => on [blue] => on
I want the red and blue, for my further processing

[Dormilich]

as far as I know, only the selected checkboxes will show up in the submitted data.

you can also filter off empty (i.e. all values that evaluate as false) values by

// PHP
$array = array_filter($_POST);

[sarega]

am trying to use both attachEvent and addEventListene r but attchEvent is not working in IE

if(document.getElementById('chk').addEventListener) {
                document.getElementById('chk').addEventListener("click",function() { abc(colors); },false);
        } else if(document.getElementById('chk').attachEvent) {
                alert("here");
                document.getElementById('chk').attachEvent('onClick', function() { abc(colors); });
        } else {
                alert("Your browser does not support any handlers");
        }

Can somebody tell me what is the problem?

[Dormilich]

try (Javascript is case sensitive)

document.getElementById('chk').attachEvent('[B]onclick[/B]', function() { abc(colors); });

otherwise you can use various cross browser functions ( e.g. addEvent() ) available via google

[sarega]

I have tried onclick also but even that did not work

[Dormilich]

maybe you should then use one of the addEvent() functions, they're working.

possibly attachEvent() doesn't like the anonymous function...?