473,394 Members | 1,709 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > dynamic checkbox selection

Join Bytes to post your question to a community of 473,394 software developers and data experts.

dynamic checkbox selection

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. }
Jan 29 '07 #1
12 9588
b1randon
171 Expert 100+
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.  
Jan 29 '07 #2
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
Jan 29 '07 #3
acoder
16,027 Expert Mod 8TB
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.
Jan 29 '07 #4
b1randon
171 Expert 100+
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.
Jan 29 '07 #5
b1randon
171 Expert 100+
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.
Jan 29 '07 #6
acoder
16,027 Expert Mod 8TB
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.
Jan 30 '07 #7
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.
Jan 30 '07 #8
acoder
16,027 Expert Mod 8TB
Then, in that case, post the entire code, or give a url to the page containing your code.
Jan 30 '07 #9
acoder
16,027 Expert Mod 8TB
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).
Jan 30 '07 #10
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>
Jan 31 '07 #11
acoder
16,027 Expert Mod 8TB
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.
Feb 1 '07 #12
Of all the research I did, I could find just the hack but none explained as to why it wouldnt work with IE. Thanks to Acoder for detailed explanation.
Sep 7 '10 #13

Sign in to post your reply or Sign up for a free account.

Similar topics

0
Multiple List Box form to build dynamic query feedback wanted
by: starace | last post by:
I have designed a form that has 5 different list boxes where the selections within each are used as criteria in building a dynamic query. Some boxes are set for multiple selections but these list...
Microsoft Access / VBA
3
Dynamic Controls on a Multi-Step Form
by: Leo J. Hart IV | last post by:
OK, here's another question for the experts: I am building a multi-step (3 steps actually) form using a panel for each step and hiding/displaying the appropriate panel/panels depending on which...
ASP.NET
5
Dynamic Controls
by: Irfan Akram | last post by:
Hi Mr.Steve, First of all many thanks for your kind response. The thing is that I am trying to control the user's action of deselecting a checkbox, once he has selected it. Also the checkbox has...
ASP.NET
3
Dynamic HTML in ASP.NET
by: Colin | last post by:
Hello, I can manage quite well in ASP but would like some advice in the best way to achieve dynamic layout in ASP.NET and still keep the page and code separate. Let's say I already have a...
ASP.NET
2
Storing dynamic form values in Arrays for display & insert
by: assgar | last post by:
Hi Developemnt on win2003 server. Final server will be linux Apache,Mysql and PHP is being used. I use 2 scripts(form and process). The form displays multiple dynamic rows with chechboxs,...
PHP
0
Gridview Help: Select All Checkbox and Row Selection
by: New2ASP | last post by:
Thanks everyone in advance for your help. I am fairly new to web development but an experienced window-based developer. Here's the structure of my Gridview Column 1 : Checkbox with SelectAll...
ASP / Active Server Pages
3
checkbox script works in IE, but not in Firefox
by: uremog | last post by:
I have a set of of check boxes. onClick, the checkboxes call check_radio and recup_checkbox. the referenced radios function as group selectors. check_radio just unchecks the radios if someone...
Javascript
0
Dynamic Checkboxe Problem in ASP .NET
by: =?Utf-8?B?SWRlcm9ja3M=?= | last post by:
Hi All, I created a dynamic checkbox in ASP .Net inside a Button1_Click event method (outside the page_load event) and performed the event handling method for the CheckedChanged event and I...
ASP.NET
1
Dynamic Checkbox Problem in ASP .NET
by: iderocks | last post by:
Hi All, I created a dynamic checkbox in ASP .Net inside a Button1_Click event method (outside the page_load event) and performed the event handling method for the CheckedChanged event and when I...
.NET Framework
0
How to turn on java script in a villaon keypad mobile phone
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
Java
0
Batch import of multiple excel files into the database
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
Data Management
0
Merging data from multiple Excel files
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
Data Management
0
Migrating Website to Cloud - Emmanuel Katto
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
General
1
Looking to do Android software development, any suggestions? Is flutter better?
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
General
1
Is that possible of reading the .csv file in column wise and the column have different lengths ?
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
C / C++
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Computer Hardware
0
Oralloy
Problem With Comparison Operator <=> in G++
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
C / C++
0
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
Online Marketing

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!