Connecting Tech Pros Worldwide Help | Site Map
bytes > topic > javascript > answers

dynamic checkbox selection

  #1  
Old January 29th, 2007, 05:27 PM
Newbie
  
Join Date: Sep 2006
Posts: 7
I'm basically using AJAX and returning a bunch of information through XML and creating a checkbox. If the the XML returns that the checkbox should be set to true, check it, otherwise leave it empty. Below is my iteration when i go through the xml document. also i'd like to have the checkbox call a function when clicked, but I can't get it to work in both IE & Mozilla. Thanks for the help.

Expand|Select|Wrap|Line Numbers
  1. var chkbox = document.createElement('input');
  2. chkbox.type='checkbox';
  3. chkbox.setAttribute('name','chkPortfolio');
  4. chkbox.setAttribute('id',"chkPortfolio_" + (j+1));
  5. chkbox.setAttribute('value',portfolios.childNodes[j].firstChild.data);
  6. if( portfolios.childNodes[j].attributes[1].text=="True") {
  7.     chkBox.onclick= function(evt) { refCell.set
  8. }
  9. else {
  10.     chkbox.checked=false;
  11. }
  12. chkbox.id = "chkPortfolio_" + (j+1);
  13. chkbox.li_id = "trPortfolio_" + (j+1);
  14. var name = document.createTextNode(portfolios.childNodes[j].firstChild.data);
  15.                     listItem.appendChild(chkbox);
  16.                     listItem.appendChild(name);
  17.                     list.appendChild(listItem);
  18. }
  #2  
Old January 29th, 2007, 06:13 PM
b1randon's Avatar
Expert
  
Join Date: Dec 2006
Location: Pittsburgh
Posts: 171

re: dynamic checkbox selection

Quote:
Originally Posted by TheVillain9
I'm basically using AJAX and returning a bunch of information through XML and creating a checkbox. If the the XML returns that the checkbox should be set to true, check it, otherwise leave it empty. Below is my iteration when i go through the xml document. also i'd like to have the checkbox call a function when clicked, but I can't get it to work in both IE & Mozilla. Thanks for the help.

Expand|Select|Wrap|Line Numbers
  1. var chkbox = document.createElement('input');
  2. chkbox.type='checkbox';
  3. chkbox.setAttribute('name','chkPortfolio');
  4. chkbox.setAttribute('id',"chkPortfolio_" + (j+1));
  5. chkbox.setAttribute('value',portfolios.childNodes[j].firstChild.data);
  6. if( portfolios.childNodes[j].attributes[1].text=="True") {
  7.     chkBox.onclick= function(evt) { refCell.set
  8. }
  9. else {
  10.     chkbox.checked=false;
  11. }
  12. chkbox.id = "chkPortfolio_" + (j+1);
  13. chkbox.li_id = "trPortfolio_" + (j+1);
  14. var name = document.createTextNode(portfolios.childNodes[j].firstChild.data);
  15.                     listItem.appendChild(chkbox);
  16.                     listItem.appendChild(name);
  17.                     list.appendChild(listItem);
  18. }
You had quite a few syntax problems but I ironed them out. This will work cross-browser:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script>
  4.     function blah(){
  5.         var j=0;
  6.         var chkbox = document.createElement('input');
  7.         chkbox.type='checkbox';
  8.         chkbox.setAttribute('name','chkPortfolio');
  9.         chkbox.setAttribute('id',"chkPortfolio_" + (j+1));
  10.         chkbox.setAttribute('value',"blah");
  11.         if( "True"=="True") {
  12.             chkbox.onclick= function() {alert('hi')};
  13.         }
  14.         else {
  15.             chkbox.checked=false;
  16.         }
  17.         chkbox.id = "chkPortfolio_" + (j+1);
  18.         chkbox.li_id = "trPortfolio_" + (j+1);
  19.         //var name = document.createTextNode(portfolios.childNodes[j].firstChild.data);
  20.         document.getElementById('body').appendChild(chkbox);
  21.         //listItem.appendChild(name);
  22.         //list.appendChild(listItem);
  23.     }
  24. </script>
  25. </head>
  26. <body id="body" onload="blah()">
  27. fdsfsdafasdfdsfsdasda
  28. </body>
  29. </html>
  30.  
  #3  
Old January 29th, 2007, 06:24 PM
Newbie
  
Join Date: Sep 2006
Posts: 7

re: dynamic checkbox selection

Quote:
Originally Posted by b1randon
You had quite a few syntax problems but I ironed them out. This will work cross-browser:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script>
  4.     function blah(){
  5.         var j=0;
  6.         var chkbox = document.createElement('input');
  7.         chkbox.type='checkbox';
  8.         chkbox.setAttribute('name','chkPortfolio');
  9.         chkbox.setAttribute('id',"chkPortfolio_" + (j+1));
  10.         chkbox.setAttribute('value',"blah");
  11.         if( "True"=="True") {
  12.             chkbox.onclick= function() {alert('hi')};
  13.         }
  14.         else {
  15.             chkbox.checked=false;
  16.         }
  17.         chkbox.id = "chkPortfolio_" + (j+1);
  18.         chkbox.li_id = "trPortfolio_" + (j+1);
  19.         //var name = document.createTextNode(portfolios.childNodes[j].firstChild.data);
  20.         document.getElementById('body').appendChild(chkbox);
  21.         //listItem.appendChild(name);
  22.         //list.appendChild(listItem);
  23.     }
  24. </script>
  25. </head>
  26. <body id="body" onload="blah()">
  27. fdsfsdafasdfdsfsdasda
  28. </body>
  29. </html>
  30.  
sorry i actually copied the wrong thing, but this helps. only problem is when...

Expand|Select|Wrap|Line Numbers
  1. if( "True"=="True") {
  2.     chkbox.onclick= function() {alert('hi')};
  3.     chkbox.checked=true;
  4. }
i want to check the checkbox, but that doesn't seem to work. suggestions
  #4  
Old January 29th, 2007, 08:21 PM
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,517
Provided Answers: 12

re: dynamic checkbox selection

Quote:
Originally Posted by TheVillain9
sorry i actually copied the wrong thing, but this helps. only problem is when...

Expand|Select|Wrap|Line Numbers
  1. if( "True"=="True") {
  2.     chkbox.onclick= function() {alert('hi')};
  3.     chkbox.checked=true;
  4. }
i want to check the checkbox, but that doesn't seem to work. suggestions
Why are you checking if "True" equals "True"? That will always return true so the code is redundant. It also means that the checkbox will never be unchecked.

Expand|Select|Wrap|Line Numbers
  1. chkbox.checked=true;
should work as long as chkbox is a valid reference to a checkbox.
  #5  
Old January 29th, 2007, 08:23 PM
b1randon's Avatar
Expert
  
Join Date: Dec 2006
Location: Pittsburgh
Posts: 171

re: dynamic checkbox selection

Quote:
Originally Posted by acoder
Why are you checking if "True" equals "True"? That will always return true so the code is redundant. It also means that the checkbox will never be unchecked.

Expand|Select|Wrap|Line Numbers
  1. chkbox.checked=true;
should work as long as chkbox is a valid reference to a checkbox.
That was my bad. I hard coded that condition because he was referencing some data that wasn't in his code snippet (and I couldn't debug). I'm sure when he uses the changes he'll put it back to the way it originally was.
  #6  
Old January 29th, 2007, 08:29 PM
b1randon's Avatar
Expert
  
Join Date: Dec 2006
Location: Pittsburgh
Posts: 171

re: dynamic checkbox selection

Quote:
Originally Posted by acoder
Why are you checking if "True" equals "True"? That will always return true so the code is redundant. It also means that the checkbox will never be unchecked.

Expand|Select|Wrap|Line Numbers
  1. chkbox.checked=true;
should work as long as chkbox is a valid reference to a checkbox.
I can see the issue too. It works fine in FFox but IE doesn't show the check. I'm working on why. If anyone knows, do tell.
  #7  
Old January 30th, 2007, 11:21 AM
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,517
Provided Answers: 12

re: dynamic checkbox selection

Quote:
Originally Posted by b1randon
I can see the issue too. It works fine in FFox but IE doesn't show the check. I'm working on why. If anyone knows, do tell.
Most likely, the reason is that the checkbox must be contained within a form. So it should be appended to the body, rather it should be child to a form tag/element.
  #8  
Old January 30th, 2007, 03:38 PM
Newbie
  
Join Date: Sep 2006
Posts: 7

re: dynamic checkbox selection

Quote:
Originally Posted by acoder
Most likely, the reason is that the checkbox must be contained within a form. So it should be appended to the body, rather it should be child to a form tag/element.
well basically i have a div called 'portfolio_box' within my form, where i append all the checkboxes i create. so i don't understand why it doesn't work in IE(6.0.2900) or FF(2.0.0.1) for me.
  #9  
Old January 30th, 2007, 10:02 PM
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,517
Provided Answers: 12

re: dynamic checkbox selection

Then, in that case, post the entire code, or give a url to the page containing your code.
  #10  
Old January 30th, 2007, 10:04 PM
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,517
Provided Answers: 12

re: dynamic checkbox selection

Quote:
Originally Posted by acoder
Most likely, the reason is that the checkbox must be contained within a form. So it should be appended to the body, rather it should be child to a form tag/element.
Mistake: the second sentence should be, So it should not be appended to the body, rather it should be a child element to a form/tag element.

I would've edited the original post, but it's already been quoted upon (noticed it too late).
  #11  
Old January 31st, 2007, 04:47 PM
Newbie
  
Join Date: Sep 2006
Posts: 7

re: dynamic checkbox selection

Quote:
Originally Posted by acoder
Mistake: the second sentence should be, So it should not be appended to the body, rather it should be a child element to a form/tag element.

I would've edited the original post, but it's already been quoted upon (noticed it too late).
This is all within an aspx web page, but there is a whole bunch of other stuff going on, so i made a quick sample for a simple page. The checkboxes are selected in FF , but not IE6...any ideas? I can't get either to be checked when I essentially have this in my aspx page. Thanks for the help.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <header>
  3. <script language="javascript"> 
  4.     function loadPort() {
  5.  
  6.         var portObj = document.getElementById('portfolio_box');
  7.         var list = document.createElement('ul');
  8.         list.setAttribute('id','chk_list');
  9.         portObj.appendChild(list);
  10.         for(j=0; j<10; j++)
  11.         {    var listItem = document.createElement('li');
  12.             listItem.setAttribute('id',"trPortfolio_" + (j+1));
  13.             var chkbox = document.createElement('input');
  14.             chkbox.setAttribute('type','checkbox');
  15.             chkbox.setAttribute('name',"nuts");
  16.             chkbox.setAttribute('id',"chkPortfolio_" + (j+1));
  17.             chkbox.setAttribute('value',"nuts");
  18.             if("True"=="True") {
  19.                 /* Nothing seems to work */
  20.                 chkbox.checked=1;
  21.                 chkbox.checked=true;
  22.                 chkbox.setAttribute('selected',true);
  23.                 chkbox.setAttribute('selected','true');
  24.             }
  25.             else {
  26.                 chkbox.checked=false;
  27.             }
  28.             chkbox.onclick= function() { 
  29.                     alert("nuts");
  30.                 }
  31.             chkbox.id = "chkPortfolio_" + (j+1);
  32.             var name = document.createTextNode("test" + (j+1));
  33.             listItem.appendChild(chkbox);
  34.             listItem.appendChild(name);
  35.             list.appendChild(listItem);
  36.         }
  37.  
  38.         portObj.appendChild(list);
  39.     }
  40. </script>    
  41.  
  42. </header>
  43.  
  44.  
  45. <body>
  46.  
  47.  
  48. <form id="Form1" method="post" >
  49.             <div id="message"></div>
  50.             <div class="item_list">
  51.                 <div class="title">Portfolios <input id="checkIt" onclick="checkAll(this.checked,'chkPortfolio',60);" type="checkbox" checked></div>
  52.                 <div id="portfolio_box"></div>
  53.             </div>
  54.             <input type="button" onclick="loadPort();" value="click me">
  55. </form>
  56.  
  57. </body>
  #12  
Old February 1st, 2007, 11:04 AM
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,517
Provided Answers: 12

re: dynamic checkbox selection

Ok, I figured it out.

IE, in its wisdom, stupidly ignores your checked setting until and unless you have appended the checkbox to something. If it's still free-standing, it just completely ignores it and sets it to (or keeps it) unchecked!

There are two ways around the problem. One is to set the checked property after you've appended the checkbox to the list-item. The second option is to use the defaultChecked property instead (thankfully, at least, IE recognises that!)

I got this info. from this site.
Reply

« previous question | next question »

Similar Threads
Thread Thread Starter Forum Replies Last Post
Dynamic checkboxes and selection sck10 answers 2 June 27th, 2008 09:04 PM
Storing dynamic form values in Arrays for display & insert assgar answers 2 October 29th, 2006 03:52 AM
Dynamic HTML in ASP.NET Colin answers 3 June 28th, 2006 11:55 AM
Multiple List Box form to build dynamic query feedback wanted starace answers 0 November 13th, 2005 06:56 AM

/bytes/development

/bytes/it

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 225,652 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved