[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

How to add an item to a checkboxlist in Javascript?

Posted on 2007-10-10
20
Medium Priority
?
1,696 Views
Last Modified: 2008-01-09
Hi all,
Scenario: If there is a dropdownbox having the three values: "Add, Subtract, Multiply" and there is a Checkboxlist with the same 3 values. If the user selects "Add" option in the dropdownlist, then the item "Add" in the Checkboxlist will be removed by the below code. If the user selects "Subtract" option in the dropdownlist, then "Add" item should be added to the checkboxlist and "Subtract" item needs to be removed.

I am not able to add the item back to the checkboxlist.

If I use the following code, I would be able to remove Checkboxlist item whose value is equal to the value selected in the DropDownList:

var chkObj = document.getElementById('CheckBoxList1').childNodes[0];
var dropDownListObject = document.getElementById('HTMLDropDownList1');
var dropDownListSelectedValue =  dropDownListObject.options[dropDownListObject.selectedIndex].value ;
for (i=0;i<chkObj.childNodes.length;i++)
                                   {
                                      if(chkObj.childNodes[i].innerText==dropDownListSelectedValue)
                                       {
                                          chkObj.removeChild(chkObj.childNodes[i]);
                                   //    chkObj.childNodes[i].appendChild();
                                  //     I tried appendChild, however it is not working.
 
                                       }

I would like to know how to add the item back to the Checkboxlist?

Any help would be greatly appreciated.
Many thanks,
DreamChaser
0
Comment
Question by:dreamchaser23
  • 11
  • 5
  • 4
20 Comments
 
LVL 21

Expert Comment

by:surajguptha
ID: 20050726
Tried this?

var chkbox = document.createElement('checkbox');  
hkbox.id = 'newchk';
chkbox.name = 'chknew';
chkObj.childNodes.Add(chkbox);
0
 
LVL 17

Accepted Solution

by:
gops1 earned 1200 total points
ID: 20051071
you can try this simpler approach

<html>
      <head>
            <title>Script Demo Gops&reg;</title>
            <script language="javascript">
                  function showHide(v){
                        var o=document.getElementById(v[v.selectedIndex].value);
                        for(var i=1;i<v.options.length;i++)
                              if(o.id==v.options[i].value){
                                    o.style.display='none';
                              }else{
                                    document.getElementById(v.options[i].value).style.display="inline";
                              }
                  }
            </script>
      </head>
      <body>
            <select name="opt" onchange="if(this.selectedIndex>0)showHide(this)">
                  <option>--select--</option>
                  <option value="add">Add</option>
                  <option value="subtract">Subtract</option>
                  <option value="multiply">Multiply</option>
            </select>
            <br>
            <span id="add"><input type="checkbox">Add<br></span>
            <span id="subtract"><input type="checkbox">Subtract<br></span>
            <span id="multiply"><input type="checkbox">Multiply</span>
      </body>
</html>
0
 

Author Comment

by:dreamchaser23
ID: 20051103
Hi Suraj, Thanks a lot for your comment.
I got this error message:
"Sys is not defined". and the value doesnt get added.
Could you please let me know why?
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 21

Expert Comment

by:surajguptha
ID: 20051114
>> "Sys is not defined".
I dont remember the word SYS being anywhere in the code i pasted. Am i missing something?.
0
 

Author Comment

by:dreamchaser23
ID: 20051177
This "Sys is not defined" error, I get in page load itself.
If I try to change an option in the dropdownlist, I get "Method not supported" (I think Add method).
Thanks again for your reply.
0
 
LVL 21

Assisted Solution

by:surajguptha
surajguptha earned 800 total points
ID: 20051193
Can you try debugging your javascript? That way you know which line is failing? To enable this goto ie-> Tools -> internet Options -> Advanced -> Disbale Script Debugging should be disabled
0
 

Author Comment

by:dreamchaser23
ID: 20051280
Thanks Suraj for your reply again.
yeah, I tried again
I got this error message  "Object does not support the property or method" at this line:
chkObj.childNodes.Add(chkbox);
0
 

Author Comment

by:dreamchaser23
ID: 20051401
Hi gops1,
Many thanks for your reply.
Obviously your code works 100%. :) Thanks for that as well..
But according to the specs (& my Manager), I gotta use checkboxlist only :(
I spent a great deal of time to make it work so far. :)
It would be great if I am able to add the checkboxlist item in JS.
Could you pls throw some light on this...
Thanks again for your comment, gops1.

0
 
LVL 21

Expert Comment

by:surajguptha
ID: 20051572
Can you try chkObj.elements.add(chkbox) ??
0
 

Author Comment

by:dreamchaser23
ID: 20051674
Thanks yet again, mate.
I get this mesg now: 'elements' is null or not an object
0
 
LVL 17

Assisted Solution

by:gops1
gops1 earned 1200 total points
ID: 20051968
yet another way of doing

<html>
      <head>
            <title>Script Demo Gops&reg;</title>
            <script language="javascript">
                  function showHide(v){
                        var o=document.getElementById(v[v.selectedIndex].value);
                        for(var i=1;i<v.options.length;i++)
                              if(o.id==v.options[i].value){
                                    o.style.display='none';
                              }else{
                                    document.getElementById(v.options[i].value).style.display="inline";
                              }
                  }

                  window.onload=function(){
                        createChk()
                  }

                  function createChk(){

                        var o=document.getElementById('opt');
                        var d=document.getElementById('chk');
                        d.innerHTML="";
                        for(var i=1;i<o.options.length;i++){
                              if(i!=o.selectedIndex){
                                    var s=document.createElement('span');
                                    var c=document.createElement('input');
                                    var t=document.createTextNode(o.options[i].text);


                                    c.type="checkbox"
                                    s.id=o.options[i].value;
                                    s.appendChild(t);
                                    s.appendChild(c);
                                    d.appendChild(s);
                              }
                        }
                  }
            </script>
      </head>
      <body>
            <select id="opt" onchange="if(this.selectedIndex>0)showHide(this)">
                  <option>--select--</option>
                  <option value="add">Add</option>
                  <option value="subtract">Subtract</option>
                  <option value="multiply">Multiply</option>
            </select>
            <div id="chk">

            </div>
      </body>
</html>
0
 
LVL 21

Assisted Solution

by:surajguptha
surajguptha earned 800 total points
ID: 20052075
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <link rel="shortcut icon" href="/images/ee.ico" type="image/x-icon" /> <title>IE 7</title> </head>  <script type="text/javascript">
  function minimize() {
var chkObj = document.getElementById('CheckBoxList1').childNodes[0].childNodes[0].childNodes[0];
alert(chkObj.innerHTML);
var chkbox = document.createElement('input'); chkbox.id = 'newchk'; chkbox.name = 'chknew'; chkbox.type='checkbox'; chkbox.setAttribute('value','check');
chkObj.appendChild(chkbox);
  }
 </script>
<body>
<table id='CheckBoxList1'>
<tr><td><input type='textbox' value='asd'><input type='checkbox' value='asd'></td></tr> <tr><td><input type='Button' value='asd' onclick='minimize()'></td></tr> <tr><td></td></tr> <tr><td></td></tr> </table> </body> </html>

This is a demo page that adds checkboxes dynamically. Try pasting the <HTML></HTML> to a html file and try clicking the button which will add the checkboxes. You will have to play around with your auto generated checklistboxlist code and the javascript to achieve exactly what you want.
0
 

Author Comment

by:dreamchaser23
ID: 20057112
Hi Gops1,
Thank you so much for the second solution.
Could you let me know the differences between this and the first one.
Obviously the first one seemed a lot easier.
Will the second one be better than the other one?
Sorry for the delay. Thanks again.
DreamChaser
0
 

Author Comment

by:dreamchaser23
ID: 20057139
Hi Suraj
Thanks a lot for the code.
It is indeed working.
I'll try to play around for my scenario.
Thanks again for your help mate
DreamChaser
0
 
LVL 17

Assisted Solution

by:gops1
gops1 earned 1200 total points
ID: 20062395
The difference is, there is nothing that is dynamically created or removed, all the check boxes are stored inside the span and given a unique ID and based on the selection they are shown/hidden.

In the second one, the check boxes are dynamically created and appended inside a div. Once there is change in the dropdown, the entire checkboxes are cleared and regenerated.
0
 

Author Comment

by:dreamchaser23
ID: 20062415
Thanks a lot mate!!!
Really clear.. understood well.
Thanks again.
I have a quick question: In this same scenario, assume that the user selected "Add" option, and add option in the checkboxes gets removed according to your first code. Now if the user clicks on Refresh button, the "Add" checkbox also gets displayed in the page. Is this correct in the real world when the user clicks on Refresh button? Or should the option selected by the user should be maintained? Please let me know as and when you find time.
Thanks a lot again for the crisp explanation.!!
0
 

Author Comment

by:dreamchaser23
ID: 20062424
Just to clarify my words:
I would like to know if the option chosen by the user (for eg: any option in a RadioButton or Listbox or DropDown or in the example scenario above) should be maintained in the view state and displayed the options exactly chosen by the user. Or is it fine to clear the values?
0
 

Author Comment

by:dreamchaser23
ID: 20062430
Please read this comment instead of the earlier one:

Just to clarify my words:
I would like to know if the option chosen by the user (for eg: any option in a RadioButton or Listbox or DropDown or in the example scenario above) should be maintained in the view state and display the options exactly chosen by the user when the "Refresh button" is clicked? Or is it fine to clear the values?
0
 
LVL 17

Expert Comment

by:gops1
ID: 20190958
This is the normal behavior you find in some browsers. But that can be cleared programitically. Since it is normal I would suggest just to ignore it. Why I am telling this is, there can be an instance that when the page loads, a checkbox has to be selected and in this case we cannot just clear them.
0
 

Author Comment

by:dreamchaser23
ID: 20192336
Many Thanks, gops1,
Yet another crystal clear explanation from ya.. :)
Can you post this reply here:
http://www.experts-exchange.com/Programming/Languages/.NET/ASP.NET/Q_22930616.html
I can award you points for this reply...
Thanks again mate!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Hello there! As a developer I have modified and refactored the unit tests which was written by fellow developers in the past. On the course, I have gone through various misconceptions and technical challenges when it comes to implementation. I would…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month18 days, 5 hours left to enroll

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question