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

appending to variable using document.getElementById

Member
  
Join Date: Feb 2008
Posts: 123
#1: Feb 16 '08
Hi,

I have a JS function which includes the following lines:

Expand|Select|Wrap|Line Numbers
  1. var table = document.getElementById("table1");
  2. var cells = table.getElementsByTagName("div");
  3. for (i = 0; i < cells.length; i++) {
  4. checkedCels = cells[i].id;
  5. var checkboxes = cells[i].getElementsByTagName("input");
  6.  
Is it possible to set "var table" from more than 1 table (i.e., "table2")? I tried to include the line "var table += document.getElementById("table2");", but it didn't work.

Thanks for any suggestions!

Newbie
  
Join Date: Feb 2008
Posts: 6
#2: Feb 18 '08

re: appending to variable using document.getElementById

The following should do what you're looking for:

Expand|Select|Wrap|Line Numbers
  1. var table = document.getElementById("table1");
  2. var cells = table.getElementsByTagName("div");
  3.  
  4. table = document.getElementById("table2");
  5. var cells2 = table.getElementsByTagName("div");
  6.  
  7. var cells = cells.concat(cells2);
  8.  
  9. for (i = 0; i < cells.length; i++) {
  10. checkedCels = cells[i].id;
  11. var checkboxes = cells[i].getElementsByTagName("input");
  12.  
Member
  
Join Date: Feb 2008
Posts: 123
#3: Feb 20 '08

re: appending to variable using document.getElementById

Thanks for the response; however, that doesn't seem to handle the variables the way I'd like. Below is more along the lines of what I *think* I need.

If possible, could someone please fix the syntax? I can't seem to get the assignment checks to work.

Thanks!

Expand|Select|Wrap|Line Numbers
  1. function createOrder() {
  2. var checkedData = "";
  3. ////var table = document.getElementById("table1");
  4. ////var cells = table.getElementsByTagName("div");
  5. var table1 = document.getElementById("table1");
  6. var table10 = document.getElementById("table10");
  7. if (table1.value != 'undefined') {
  8. var cells = table1.getElementsByTagName("div");
  9. } else if (table10.value != 'undefined') {
  10. var cells = table10.getElementsByTagName("div");
  11.  
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#4: Feb 20 '08

re: appending to variable using document.getElementById

So you want table1 OR table10, not table1 AND table10? Note that a table doesn't have a value.
Member
  
Join Date: Feb 2008
Posts: 123
#5: Feb 20 '08

re: appending to variable using document.getElementById

Hi!

I'd prefer to have table1 AND table 10 (sorry about the numbering - it's on a log scale!). Any ideas?

Thanks!
Member
  
Join Date: Feb 2008
Posts: 123
#6: Feb 20 '08

re: appending to variable using document.getElementById

Hi!

I'd prefer to have table1 AND table 10 (sorry about the numbering - it's on a log scale for some reason!). I thought OR would work as it loops each time and appends to an array.

Any ideas?

Expand|Select|Wrap|Line Numbers
  1. function createOrder() {
  2. var checkedData = "";
  3. ////var table = document.getElementById("table1");
  4. ////var cells = table.getElementsByTagName("div");
  5. var table1 = document.getElementById("table1");
  6. var table10 = document.getElementById("table10");
  7. if (table1.value != 'undefined') {
  8. var cells = table1.getElementsByTagName("div");
  9. } else if (table10.value != 'undefined') {
  10. var cells = table10.getElementsByTagName("div");
  11. }
  12. for (i = 0; i < cells.length; i++) {
  13. checkedCels = cells[i].id;
  14. var checkedNams = "";
  15. var checkedVals = "";
  16. var checkedScreen = "";
  17. var checkboxes = cells[i].getElementsByTagName("input");
  18. for (j = 0; j < checkboxes.length; j++) {
  19. if (checkboxes[j].checked) {
  20. checkedNams += checkboxes[j].name;
  21. }
  22. checkedVals = checkboxes[j].value;
  23. checkedScreen = checkboxes[0].value;
  24. //MIGHT NEED TO POP OFF FIRST ELEMENT IN checkboxes[].value TO REMOVE screen[]
  25. }
  26. //if ( checkedVals != "" ){
  27. checkedData = checkedData.concat(checkedCels + checkedScreen + checkedNams + checkedVals)
  28. //        }
  29. }
  30. document.form1.sendData.value = checkedData;
  31. }
  32.  
Thanks!
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#7: Feb 20 '08

re: appending to variable using document.getElementById

Quote:

Originally Posted by phub11

I'd prefer to have table1 AND table 10 (sorry about the numbering - it's on a log scale for some reason!). I thought OR would work as it loops each time and appends to an array.

If you want both, why wouldn't the code posted by wyatt not work? It takes the divs from table10 and concatenates them to the divs from table1.

What are you trying to test in the following lines:
Expand|Select|Wrap|Line Numbers
  1. if (table1.value != 'undefined') {
  2. var cells = table1.getElementsByTagName("div");
  3. } else if (table10.value != 'undefined') {
  4. var cells = table10.getElementsByTagName("div");
  5. }
  6.  
A table doesn't have a value attribute.
Member
  
Join Date: Feb 2008
Posts: 123
#8: Feb 20 '08

re: appending to variable using document.getElementById

Hi! I just retried wyatts code, and the array "checkedData" is blank - even if I include a string. Still, I appreciate wyatt's suggestion.

The code you referenced was an attempt to avoid using "concat". I thought that it would set "cells" using the original code which works, depending on which table I had dragged the draggable to.

Here is the code with wyatts suggestion which does not appear to work. More suggestions please!:

Expand|Select|Wrap|Line Numbers
  1. function createOrder() {
  2. var checkedData = "";
  3. //THIS WORKS WITH 1 TABLE//var table = document.getElementById("table1");
  4. //THIS WORKS WITH 1 TABLE//var cells = table.getElementsByTagName("div");
  5. //var table1 = document.getElementById("table1");
  6. //var table10 = document.getElementById("table10");
  7. //if (table1.value != 'undefined') {
  8. //var cells = table1.getElementsByTagName("div");
  9. //} else if (table10.value != 'undefined') {
  10. //var cells = table10.getElementsByTagName("div");
  11. //}
  12.  
  13. var table = document.getElementById("table1");
  14. var cells = table.getElementsByTagName("div");
  15. table = document.getElementById("table10");
  16. var cells2 = table.getElementsByTagName("div");
  17. var cells = cells.concat(cells2);
  18.  
  19. for (i = 0; i < cells.length; i++) {
  20. checkedCels = cells[i].id;
  21. var checkedNams = "";
  22. var checkedVals = "";
  23. var checkedScreen = "";
  24. var checkboxes = cells[i].getElementsByTagName("input");
  25. for (j = 0; j < checkboxes.length; j++) {
  26. if (checkboxes[j].checked) {
  27. checkedNams += checkboxes[j].name;
  28. }
  29. checkedVals = checkboxes[j].value;
  30. checkedScreen = checkboxes[0].value;
  31. //MIGHT NEED TO POP OFF FIRST ELEMENT IN checkboxes[].value TO REMOVE screen[]
  32. }
  33. //if ( checkedVals != "" ){
  34. checkedData = checkedData.concat(checkedCels + checkedScreen + checkedNams + checkedVals")
  35. //        }
  36. }
  37. document.form1.sendData.value = checkedData;
  38. }
  39.  
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#9: Feb 21 '08

re: appending to variable using document.getElementById

Quote:

Originally Posted by phub11

Hi! I just retried wyatts code, and the array "checkedData" is blank - even if I include a string.

And it's not blank when using one table?

Quote:

Originally Posted by phub11

The code you referenced was an attempt to avoid using "concat". I thought that it would set "cells" using the original code which works, depending on which table I had dragged the draggable to.

Another alternative is to get the elements from the parent of the tables, thus avoiding concatenation.
Member
  
Join Date: Feb 2008
Posts: 123
#10: Feb 21 '08

re: appending to variable using document.getElementById

The code doesn't work with just 1 table either, even if I do:

Expand|Select|Wrap|Line Numbers
  1. var cells2 = "";
  2.  
Could you please show me example code of how this alternative method works?

Thanks!
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#11: Feb 21 '08

re: appending to variable using document.getElementById

concat expects an array (or a number of arrays). Test by alerting the cell ids one by one.
Member
  
Join Date: Feb 2008
Posts: 123
#12: Feb 21 '08

re: appending to variable using document.getElementById

Thanks for the suggestion. I have multiple tables with a total of 96 cells. I've tried the following, but I have no idea how to assign "checkedCels" and "checkboxes".

Expand|Select|Wrap|Line Numbers
  1. function createOrder() {
  2. var checkedData = "";
  3. var cells = new Array();
  4. //var table = document.getElementById("table1");
  5. //var cells = table.getElementsByTagName("div");
  6. for (k = 0; k < 95; k++) {
  7. cells[k] = "cell"+(k+1);
  8. }
  9.  
  10. for (i = 0; i < cells.length; i++) {
  11. checkedCels = cells[i].id;
  12. var checkedNams = "";
  13. var checkedVals = "";
  14. var checkedScreen = "";
  15. var checkboxes = cells[i].getElementsByTagName("input");
  16.  
Member
  
Join Date: Feb 2008
Posts: 123
#13: Feb 21 '08

re: appending to variable using document.getElementById

Just figured it out.

All I had to do was repeat the whole function for each table, but without resetting "checkedData".

Thanks for your help. Hopefully I can get it to work properly on IE.

Cheers!
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#14: Feb 22 '08

re: appending to variable using document.getElementById

Quote:

Originally Posted by phub11

Just figured it out.

All I had to do was repeat the whole function for each table, but without resetting "checkedData".

Thanks for your help. Hopefully I can get it to work properly on IE.

Cheers!

Oh right, you were resetting checkedData each time! Can you post the revised code. Perhaps we can get it to work in IE.
Member
  
Join Date: Feb 2008
Posts: 123
#15: Feb 22 '08

re: appending to variable using document.getElementById

The (abridged) code:

Expand|Select|Wrap|Line Numbers
  1. function createOrder() {
  2. var checkedData = "";
  3. var table = document.getElementById("table1");
  4. var cells = table.getElementsByTagName("div");
  5. for (i = 0; i < cells.length; i++) {
  6. checkedCels = cells[i].id;
  7. var checkedNams = "";
  8. var checkedVals = "";
  9. var checkedScreen = "";
  10. var checkboxes = cells[i].getElementsByTagName("input");
  11. for (j = 0; j < checkboxes.length; j++) {
  12. if (checkboxes[j].checked) {
  13. checkedNams += checkboxes[j].name;
  14. }
  15. checkedVals = checkboxes[j].value;
  16. checkedScreen = checkboxes[0].value;
  17. //MIGHT NEED TO POP OFF FIRST ELEMENT IN checkboxes[].value TO REMOVE screen[]
  18. }
  19. //if ( checkedVals != "" ){
  20. checkedData = checkedData.concat(checkedCels + checkedScreen + checkedNams + checkedVals)
  21. //        }
  22. }
  23.  
  24. var table = document.getElementById("table10");
  25. //----REPEAT AS BEFORE----
  26. //END
  27. }
  28. document.form1.sendData.value = checkedData;
  29. }
  30.  
The problem with IE is the way it handles the draggables (which are defined using scriptaculous). The value assigned to a selected checkbox using a drop down within the object isn't passed when using IE6 (i.e., after the object it cloned, the clones can't assign a value - only the original template).

It would be great if you could help me on that one.

Thanks!
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#16: Feb 22 '08

re: appending to variable using document.getElementById

Quote:

Originally Posted by phub11

The problem with IE is the way it handles the draggables (which are defined using scriptaculous). The value assigned to a selected checkbox using a drop down within the object isn't passed when using IE6 (i.e., after the object it cloned, the clones can't assign a value - only the original template).

For IE, get the checked property (true/false) of the checkboxes and put them in the array, then loop over the array to set the checked property of the clones.

Just two notes on the code. It could be optimised as you wanted in the original question, but we could leave that for another time.

Secondly, should checkedVals be in the loop rather than outside?
Member
  
Join Date: Feb 2008
Posts: 123
#17: Feb 22 '08

re: appending to variable using document.getElementById

I will try to figure out the IE code, but JS is much harder to learn than PHP! If you have any pointers, that would be great!

Not sure about your question - checkedVals is set/reset in the i loop - defined in the j loop - then appended onto a string - which is then put in an array. This is repeated for each table.

Cheers!
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#18: Feb 22 '08

re: appending to variable using document.getElementById

Quote:

Originally Posted by phub11

I will try to figure out the IE code, but JS is much harder to learn than PHP! If you have any pointers, that would be great!

Check out some of the links in the Offsite Links thread (sticky at the top of this forum) - the w3schools website should be good for starting out.

Quote:

Originally Posted by phub11

Not sure about your question - checkedVals is set/reset in the i loop - defined in the j loop - then appended onto a string - which is then put in an array. This is repeated for each table.

Sorry, I meant within the if-statement. I see that checkedNams is only appended to if the checkbox is checked. Should checkedVals be appended to in the same manner or for all values?
Member
  
Join Date: Feb 2008
Posts: 123
#19: Feb 27 '08

re: appending to variable using document.getElementById

Hi again!

I'm not having much luck with fixing the IE problem. I gave up trying to figure out how to implement acoder's suggestion as I was not sure what I was doing!

Anyway, I've tracked the issue down to being a problem with how "value" is passed from the selection to the check box using DHTML. Could you please help me out with the following code (or provide some more suggestions) - it works fine in FF2:

Expand|Select|Wrap|Line Numbers
  1. function createOrder()
  2. {
  3. var table = document.getElementById("table1");
  4. var cells = table.getElementsByTagName("div");
  5. checkedData = "";
  6. checkedVals = "";
  7. //for (i = 0; i < cells.length; i++) {
  8. for (i = 0; i < 1; i++) {
  9. checkedCels = cells[i].id;
  10. var checkboxes = cells[i].getElementsByTagName("input");
  11. for (j = 0; j < checkboxes.length; j++) {
  12. if (checkboxes[j].checked) {
  13. checkedVals = checkboxes[j].value;
  14. checkedData = checkedData.concat("Cell:" + checkedCels + " and Value:" + checkedVals);
  15. }
  16. }
  17. }
  18. document.getElementById("order").value=checkedData;
  19. }
  20.  
  21. function updateValue() {
  22. document.getElementById('box1').value = document.getElementById('selectField').value;
  23. }
  24.  
...and...

Expand|Select|Wrap|Line Numbers
  1. <select name="conditions_list" id="selectField" onChange="updateValue();">
  2. <option value="0">0</option>
  3. <option value="1">1</option>
  4. <option value="2">2</option>
  5. <option value="3">3</option>
  6. </select>
  7. <br>
  8. <input type="checkbox" name="coffee" value="" id="box1">box1<br />
  9. </div>
  10.  
Thanks!
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#20: Feb 28 '08

re: appending to variable using document.getElementById

Quote:

Originally Posted by acoder

For IE, get the checked property (true/false) of the checkboxes and put them in the array, then loop over the array to set the checked property of the clones.

What I meant here was something like this:
Expand|Select|Wrap|Line Numbers
  1. // get checkboxes' checked property
  2. var checked = [];
  3. for (i = 0; i < checkboxes.length; i++) { // assuming checkboxes contains checkboxes
  4.   checked[i] = checkboxes.checked;
  5. }
  6. // ...then when checkboxes cloned, reset their checked properties:
  7. // assuming same number of checkboxes
  8. for (i = 0; i < clonedCheckboxes.length; i++) {
  9.   clonedCheckboxes[i].checked = checked[i];
  10. }
Member
  
Join Date: Feb 2008
Posts: 123
#21: Feb 28 '08

re: appending to variable using document.getElementById

Thanks for the reply. I *think* I see what you are suggesting - set up an array based on the number of checkboxes made by drag-drop; then reassign them to the cloned states (sorry if I'm way off base!):

However, I'm not sure how to assign "clonedCheckboxes". I Googled scriptaculous to see how it handles cloned objects - the following web page seems to suggest how it's done, but my JS experience it insufficient to make sense of it:

http://wiki.script.aculo.us/scriptac...Droppables.add
(function asignDragAndDrop)

Could you (or some other kind soul) nurse me through this?
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#22: Feb 28 '08

re: appending to variable using document.getElementById

Actually, there is another way: using the defaultChecked property. Have you tried it with that?
Member
  
Join Date: Feb 2008
Posts: 123
#23: Feb 28 '08

re: appending to variable using document.getElementById

Just Googled it and found a nice example:

http://www.java2s.com/Code/JavaScript/Form-Control/defaultCheckedExample.htm

However, I'm still not sure if it will solve the problem of assigning "value" to cloned objects. I'll give it a try though!
Member
  
Join Date: Feb 2008
Posts: 123
#24: Feb 28 '08

re: appending to variable using document.getElementById

Hi again!

Still no luck! Looks like it behaves in an identical manner to the "checked" property.
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#25: Feb 29 '08

re: appending to variable using document.getElementById

Ah, I see, it's the value, not the checked property. Have you checked that the checked property is being passed properly because the value isn't set if the checkbox is not checked.

I'm not sure if IE6 has a problem with the value property of dynamically created checkboxes too. If it does have, you can probably use the same array time method.

If that doesn't work, can you post a link to a test page.
Member
  
Join Date: Feb 2008
Posts: 123
#26: Feb 29 '08

re: appending to variable using document.getElementById

The following shows that the code works fine in FF2, and that after cloning, the status of the checkbox is determined correctly in IE6, but that IE6 doesn't read the "value" from the drop down in the clone correctly.

Go to the main page: page for a day (one word - no spaces)
Then go to: checkbox.html

Thanks for your help!
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#27: Feb 29 '08

re: appending to variable using document.getElementById

The most probable reason for that is that you have multiple ids. Each dragged checkbox and select element have the same ids (box1 and selectField).

When the clones are created, you need to give them unique IDs.

You could change updateValue() to not require the ID, e.g. by passing 'this' to the function.
Member
  
Join Date: Feb 2008
Posts: 123
#28: Mar 3 '08

re: appending to variable using document.getElementById

Thanks for the suggestion!

The "current object" concept seems rather confusing to me - I'm much more comfortable assigning specific variables. Could you see where I am going wrong with the following?:

Expand|Select|Wrap|Line Numbers
  1. function updateValue(input) {
  2. //document.getElementById('box1').value = document.getElementById('selectField').value;
  3. //input.value = document.getElementById('selectField').value;
  4. document.getElementById('box1').value = input.value;
  5. }
  6.  
  7.  
  8. <div id="l1">
  9. <select name="conditions_list" onChange="updateValue(this);">
  10. <option value="0">0</option>
  11. <option value="1">1</option>
  12. <option value="2">2</option>
  13. <option value="3">3</option>
  14. </select>
  15. <br>
  16. <input id="box1" name="test" type="checkbox" value="">box1<br>
  17. </div>
  18.  
Thanks!
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#29: Mar 4 '08

re: appending to variable using document.getElementById

If there's only one checkbox in the containing element, you can use something like:
Expand|Select|Wrap|Line Numbers
  1. function updateValue(input) {
  2. var parent = input.parentNode;
  3. parent.getElementsByTagName("input")[0].value = input.value;
  4. }
Member
  
Join Date: Feb 2008
Posts: 123
#30: Mar 4 '08

re: appending to variable using document.getElementById

Hooray, it works - thanks!

With multiple checkboxes it looks like I can treat it as an array.

Thank you so much!
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#31: Mar 5 '08

re: appending to variable using document.getElementById

You're welcome. Glad you got it working.
Member
  
Join Date: Feb 2008
Posts: 123
#32: Mar 5 '08

re: appending to variable using document.getElementById

One last question on this topic:

Say I wanted to add multiple drop-downs in the draggable object, how would I do it? I've tried to combine into one array and then splitting afterwards, but it doesn't work:

Expand|Select|Wrap|Line Numbers
  1. function updateValue(input) {
  2. //document.getElementById('box1').value = document.getElementById('selectField').value;
  3. //input.value = document.getElementById('selectField').value;
  4. //document.getElementById('box1').value = input.value;
  5. var parent = input.parentNode;
  6. parent.getElementsByTagName("input")[1].value = input.value;
  7. parent.getElementsByTagName("input")[2].value = input.value;
  8. }
  9.  
  10. function updateScreen(input1) {
  11. //document.getElementById('screen').value = document.getElementById('selectScreen').value;
  12. var parent = input.parentNode;
  13. parent.getElementsByTagName("input")[0].value = input1.value;
  14. }
  15.  
  16. <div id="l1">
  17. <select name="screens_list" id="selectScreen" onChange="updateScreen(this);">
  18. <option value="Option A">Option A</option>
  19. </select>
  20. <select name="conditions_list" onChange="updateValue(this);">
  21. <option value="0">0</option>
  22. <option value="1">1</option>
  23. <option value="2">2</option>
  24. <option value="3">3</option>
  25. </select>
  26. <br>
  27. <input id="box1" name="test" type="checkbox" value="">box1<br>
  28. <input id="box2" name="test" type="checkbox" value="">box2<br>
  29. </div>
  30.  
Thanks!
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#33: Mar 5 '08

re: appending to variable using document.getElementById

In updateScreen, it should be: var parent = input1.parentNode;
Member
  
Join Date: Feb 2008
Posts: 123
#34: Mar 5 '08

re: appending to variable using document.getElementById

Hi!

I've tried that, but no luck. I've also tried the following:

Expand|Select|Wrap|Line Numbers
  1. function updateValue(input, scrn) {
  2. //document.getElementById('box1').value = document.getElementById('selectField').value;
  3. var parent = input.parentNode;
  4. parent.getElementsByTagName("input")[0].value = input.value;
  5. var parent = scrn.parentNode;
  6. parent.getElementsByTagName("input")[0].value = scrn.value;
  7. }
  8.  
  9. <div id="l1">
  10. <select name="screens_list" onChange="updateValue(srcn);">
  11. <option value="Option A">Option A</option>
  12. </select>
  13. <select name="conditions_list" onChange="updateValue(this);">
  14. <option value="0">0</option>
  15. <option value="1">1</option>
  16. <option value="2">2</option>
  17. <option value="3">3</option>
  18. </select>
  19. <br>
  20. <input id="box1" name="test" type="checkbox" value="">box1<br>
  21. <input id="box2" name="test" type="checkbox" value="">box2<br>
  22. </div>
  23.  
Any ideas?

Thanks!
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#35: Mar 5 '08

re: appending to variable using document.getElementById

Quote:

Originally Posted by phub11

Say I wanted to add multiple drop-downs in the draggable object, how would I do it? I've tried to combine into one array and then splitting afterwards, but it doesn't work

Are you having problems with dragging the drop downs or with updating the values of checkboxes when there are multiple drop downs?

Also, should the drop-downs update the same checkbox(es) or different ones?
Member
  
Join Date: Feb 2008
Posts: 123
#36: Mar 5 '08

re: appending to variable using document.getElementById

The following works fine in FF2, and now passes the value of the checked checkboxes correctly in IE6, but doesn't pass the value of the "screen" drop-down, which is included in the same draggable. I think the problem is related to IE6 not passing "input1.value" to the checkboxes[] array :

Expand|Select|Wrap|Line Numbers
  1. var checkboxes = cells[i].getElementsByTagName("input");
  2. for (j = 0; j < checkboxes.length; j++) {
  3. if (checkboxes[j].checked) {
  4. checkedNams += checkboxes[j].name;
  5. checkedVals = checkboxes[j].value;
  6. checkedScreen = checkboxes[0].value;
  7. checkedData = checkedData.concat(checkedCels + " with checked boxes " + checkedNams + " and Value:" + checkedVals + " and Option:" + checkedScreen);
  8. }
  9. }
  10.  
  11. function updateValue(input) {
  12. //document.getElementById('box1').value = document.getElementById('selectField').value;
  13. //document.getElementById('box2').value = document.getElementById('selectField').value;
  14. var parent = input.parentNode;
  15. parent.getElementsByTagName("input")[1].value = input.value;
  16. parent.getElementsByTagName("input")[2].value = input.value;
  17. }
  18.  
  19. function updateScreen(input1) {
  20. //document.getElementById('screen').value = document.getElementById('selectScreen').value;
  21. var parent1 = input1.parentNode;
  22. parent1.getElementsByTagName("input")[0].value = input1.value;
  23. }
  24.  
  25. <div id="l1">
  26. <select name="screens_list" onChange="updateScreen(this);">
  27. <option value="Option A">Option A</option>
  28. </select>
  29. <input id="screen" name="screen[]" value="" type="hidden">
  30. <select name="conditions_list" onChange="updateValue(this);">
  31. <option value="0">0</option>
  32. <option value="1">1</option>
  33. <option value="2">2</option>
  34. <option value="3">3</option>
  35. </select>
  36. <br>
  37. <input id="box1" name="box1" type="checkbox" value="">box1<br>
  38. <input id="box2" name="box2" type="checkbox" value="">box2<br>
  39. </div>
  40.  
Thanks!
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#37: Mar 5 '08

re: appending to variable using document.getElementById

Quote:

Originally Posted by phub11

The following works fine in FF2, and now passes the value of the checked checkboxes correctly in IE6, but doesn't pass the value of the "screen" drop-down, which is included in the same draggable. I think the problem is related to IE6 not passing "input1.value" to the checkboxes[] array

If I follow correctly, you want to set the hidden form field (ID screen) to the value of the screen drop-down?
Member
  
Join Date: Feb 2008
Posts: 123
#38: Mar 5 '08

re: appending to variable using document.getElementById

Yes!

So all the checkbox(es) of a given dropped cell have the same number and screen name assigned to them.

Actually, I don't need a drop-down for screen, as it's only 1 choice (for the given draggable - each type of draggable has a different "screen" variable assigned to it). I couldn't figure out how to do it any other way.

P.S: I can't seem to get "screen" to pass using the new code in FF2 now!?!
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#39: Mar 5 '08

re: appending to variable using document.getElementById

Quote:

Originally Posted by phub11

Actually, I don't need a drop-down for screen, as it's only 1 choice (for the given draggable - each type of draggable has a different "screen" variable assigned to it). I couldn't figure out how to do it any other way.

In that case, just keep and set a hidden variable in each cell when the elements are dragged into it - no need for the second drop-down.
Member
  
Join Date: Feb 2008
Posts: 123
#40: Mar 6 '08

re: appending to variable using document.getElementById

Yeah, I had thought of that at the beginning, but never figured it out (being a JS newbie), so followed the INPUT route!

Finally managed to figure out how to pass an HTML variable to JS - it's so simple!!!

<script>
var checkedScreen = "OptionA";
</script>

Thanks for all your patience!

P.S: I have another thread running about anchors in scrollable div's. Any experience with that?!
Member
  
Join Date: Feb 2008
Posts: 123
#41: Mar 6 '08

re: appending to variable using document.getElementById

SCRATCH THAT!!!

If you have multiple draggables, the last variable in the list is defined for all draggables.

Looks like my old way would solve this problem if I could get multiple drop-downs in a draggable to work!!!
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#42: Mar 6 '08

re: appending to variable using document.getElementById

Quote:

Originally Posted by phub11

If you have multiple draggables, the last variable in the list is defined for all draggables.

Why not set the target hidden element when the drag takes place, e.g. if dragged to cell1, set the hidden element value already in cell1 to "OptionA" or whatever.
Member
  
Join Date: Feb 2008
Posts: 123
#43: Mar 6 '08

re: appending to variable using document.getElementById

The idea is to have multiple draggables, with "screen" being set differently for each type of draggable.
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#44: Mar 6 '08

re: appending to variable using document.getElementById

So with multiple drop-downs, how are you differentiating between each draggable?
Member
  
Join Date: Feb 2008
Posts: 123
#45: Mar 10 '08

re: appending to variable using document.getElementById

Hi acoder,

To avoid making this thread way too long I PM'd you last week. Please let me know if you'd prefer me to add to this thread instead?
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#46: Mar 11 '08

re: appending to variable using document.getElementById

Sorry, this went off my radar. I'll try to have a look at this later.
Reply

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/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 226,501 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