Link to home
Start Free TrialLog in
Avatar of dreamchaser23
dreamchaser23

asked on

How to add an item to a checkboxlist in Javascript?

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
Avatar of surajguptha
surajguptha
Flag of United States of America image

Tried this?

var chkbox = document.createElement('checkbox');  
hkbox.id = 'newchk';
chkbox.name = 'chknew';
chkObj.childNodes.Add(chkbox);
ASKER CERTIFIED SOLUTION
Avatar of gops1
gops1
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of dreamchaser23
dreamchaser23

ASKER

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?
>> "Sys is not defined".
I dont remember the word SYS being anywhere in the code i pasted. Am i missing something?.
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.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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);
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.

Can you try chkObj.elements.add(chkbox) ??
Thanks yet again, mate.
I get this mesg now: 'elements' is null or not an object
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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
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
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.!!
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?
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?
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.
Many Thanks, gops1,
Yet another crystal clear explanation from ya.. :)
Can you post this reply here:
https://www.experts-exchange.com/questions/22930616/What-should-be-the-ideal-behavior-of-a-ASP-NET-page-when-Refresh-button-is-clicked.html
I can award you points for this reply...
Thanks again mate!