appending to variable using document.getElementById

[phub11]

Hi,

I have a JS function which includes the following lines:

var table = document.getElementById("table1");
var cells = table.getElementsByTagName("div");
for (i = 0; i < cells.length; i++) {
checkedCels = cells[i].id;
var checkboxes = cells[i].getElementsByTagName("input");
 

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!

[wyatt]

The following should do what you're looking for:

var table = document.getElementById("table1");
var cells = table.getElementsByTagName("div");
 
table = document.getElementById("table2");
var cells2 = table.getElementsByTagName("div");
 
var cells = cells.concat(cells2);
 
for (i = 0; i < cells.length; i++) {
checkedCels = cells[i].id;
var checkboxes = cells[i].getElementsByTagName("input");
 

[phub11]

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!

function createOrder() {
var checkedData = "";
////var table = document.getElementById("table1");
////var cells = table.getElementsByTagName("div");
var table1 = document.getElementById("table1");
var table10 = document.getElementById("table10");
if (table1.value != 'undefined') {
var cells = table1.getElementsByTagName("div");
} else if (table10.value != 'undefined') {
var cells = table10.getElementsByTagName("div");
 

[acoder]

So you want table1 OR table10, not table1 AND table10? Note that a table doesn't have a value.

[phub11]

Hi!

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

Thanks!

[phub11]

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?

function createOrder() {
var checkedData = "";
////var table = document.getElementById("table1");
////var cells = table.getElementsByTagName("div");
var table1 = document.getElementById("table1");
var table10 = document.getElementById("table10");
if (table1.value != 'undefined') {
var cells = table1.getElementsByTagName("div");
} else if (table10.value != 'undefined') {
var cells = table10.getElementsByTagName("div");
}
for (i = 0; i < cells.length; i++) {
checkedCels = cells[i].id;
var checkedNams = "";
var checkedVals = "";
var checkedScreen = "";
var checkboxes = cells[i].getElementsByTagName("input");
for (j = 0; j < checkboxes.length; j++) {
if (checkboxes[j].checked) {
checkedNams += checkboxes[j].name;
}
checkedVals = checkboxes[j].value;
checkedScreen = checkboxes[0].value;
//MIGHT NEED TO POP OFF FIRST ELEMENT IN checkboxes[].value TO REMOVE screen[]
}
//if ( checkedVals != "" ){
checkedData = checkedData.concat(checkedCels + checkedScreen + checkedNams + checkedVals)
//        }
}
document.form1.sendData.value = checkedData;
}
 

Thanks!

[acoder]

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:

if (table1.value != 'undefined') {
var cells = table1.getElementsByTagName("div");
} else if (table10.value != 'undefined') {
var cells = table10.getElementsByTagName("div");
}
 

A table doesn't have a value attribute.

[phub11]

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!:

function createOrder() {
var checkedData = "";
//THIS WORKS WITH 1 TABLE//var table = document.getElementById("table1");
//THIS WORKS WITH 1 TABLE//var cells = table.getElementsByTagName("div");
//var table1 = document.getElementById("table1");
//var table10 = document.getElementById("table10");
//if (table1.value != 'undefined') {
//var cells = table1.getElementsByTagName("div");
//} else if (table10.value != 'undefined') {
//var cells = table10.getElementsByTagName("div");
//}
 
var table = document.getElementById("table1");
var cells = table.getElementsByTagName("div");
table = document.getElementById("table10");
var cells2 = table.getElementsByTagName("div");
var cells = cells.concat(cells2);
 
for (i = 0; i < cells.length; i++) {
checkedCels = cells[i].id;
var checkedNams = "";
var checkedVals = "";
var checkedScreen = "";
var checkboxes = cells[i].getElementsByTagName("input");
for (j = 0; j < checkboxes.length; j++) {
if (checkboxes[j].checked) {
checkedNams += checkboxes[j].name;
}
checkedVals = checkboxes[j].value;
checkedScreen = checkboxes[0].value;
//MIGHT NEED TO POP OFF FIRST ELEMENT IN checkboxes[].value TO REMOVE screen[]
}
//if ( checkedVals != "" ){
checkedData = checkedData.concat(checkedCels + checkedScreen + checkedNams + checkedVals")
//        }
}
document.form1.sendData.value = checkedData;
}
 

[acoder]

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?

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.

[phub11]

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

var cells2 = "";
 

Could you please show me example code of how this alternative method works?

Thanks!

[acoder]

concat expects an array (or a number of arrays). Test by alerting the cell ids one by one.

[phub11]

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".

function createOrder() {
var checkedData = "";
var cells = new Array();
//var table = document.getElementById("table1");
//var cells = table.getElementsByTagName("div");
for (k = 0; k < 95; k++) {
cells[k] = "cell"+(k+1);
}
 
for (i = 0; i < cells.length; i++) {
checkedCels = cells[i].id;
var checkedNams = "";
var checkedVals = "";
var checkedScreen = "";
var checkboxes = cells[i].getElementsByTagName("input");
 

[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!

[acoder]

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.

[phub11]

The (abridged) code:

function createOrder() {
var checkedData = "";
var table = document.getElementById("table1");
var cells = table.getElementsByTagName("div");
for (i = 0; i < cells.length; i++) {
checkedCels = cells[i].id;
var checkedNams = "";
var checkedVals = "";
var checkedScreen = "";
var checkboxes = cells[i].getElementsByTagName("input");
for (j = 0; j < checkboxes.length; j++) {
if (checkboxes[j].checked) {
checkedNams += checkboxes[j].name;
}
checkedVals = checkboxes[j].value;
checkedScreen = checkboxes[0].value;
//MIGHT NEED TO POP OFF FIRST ELEMENT IN checkboxes[].value TO REMOVE screen[]
}
//if ( checkedVals != "" ){
checkedData = checkedData.concat(checkedCels + checkedScreen + checkedNams + checkedVals)
//        }
}
 
var table = document.getElementById("table10");
//----REPEAT AS BEFORE----
//END
}
document.form1.sendData.value = checkedData;
}
 

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]

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?

[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!

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]

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.

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?

[phub11]

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:

function createOrder()
{
var table = document.getElementById("table1");
var cells = table.getElementsByTagName("div");
checkedData = "";
checkedVals = "";
//for (i = 0; i < cells.length; i++) {
for (i = 0; i < 1; i++) {
checkedCels = cells[i].id;
var checkboxes = cells[i].getElementsByTagName("input");
for (j = 0; j < checkboxes.length; j++) {
if (checkboxes[j].checked) {
checkedVals = checkboxes[j].value;
checkedData = checkedData.concat("Cell:" + checkedCels + " and Value:" + checkedVals);
}
}
}
document.getElementById("order").value=checkedData;
}
 
function updateValue() {
document.getElementById('box1').value = document.getElementById('selectField').value;
}
 

...and...

<select name="conditions_list" id="selectField" onChange="updateValue();">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br>
<input type="checkbox" name="coffee" value="" id="box1">box1<br />
</div>
 

Thanks!

[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:

// get checkboxes' checked property
var checked = [];
for (i = 0; i < checkboxes.length; i++) { // assuming checkboxes contains checkboxes
  checked[i] = checkboxes.checked;
}
// ...then when checkboxes cloned, reset their checked properties:
// assuming same number of checkboxes
for (i = 0; i < clonedCheckboxes.length; i++) {
  clonedCheckboxes[i].checked = checked[i];
}

[phub11]

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]

Actually, there is another way: using the defaultChecked property. Have you tried it with that?

[phub11]

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!

[phub11]

Hi again!

Still no luck! Looks like it behaves in an identical manner to the "checked" property.

[acoder]

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.

[phub11]

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]

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.

[phub11]

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?:

function updateValue(input) {
//document.getElementById('box1').value = document.getElementById('selectField').value;
//input.value = document.getElementById('selectField').value;
document.getElementById('box1').value = input.value;
}
 
 
<div id="l1">
<select name="conditions_list" onChange="updateValue(this);">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br>
<input id="box1" name="test" type="checkbox" value="">box1<br>
</div>
 

Thanks!

[acoder]

If there's only one checkbox in the containing element, you can use something like:

function updateValue(input) {
var parent = input.parentNode;
parent.getElementsByTagName("input")[0].value = input.value;
}

[phub11]

Hooray, it works - thanks!

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

Thank you so much!

[acoder]

You're welcome. Glad you got it working.

[phub11]

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:

function updateValue(input) {
//document.getElementById('box1').value = document.getElementById('selectField').value;
//input.value = document.getElementById('selectField').value;
//document.getElementById('box1').value = input.value;
var parent = input.parentNode;
parent.getElementsByTagName("input")[1].value = input.value;
parent.getElementsByTagName("input")[2].value = input.value;
}
 
function updateScreen(input1) {
//document.getElementById('screen').value = document.getElementById('selectScreen').value;
var parent = input.parentNode;
parent.getElementsByTagName("input")[0].value = input1.value;
}
 
<div id="l1">
<select name="screens_list" id="selectScreen" onChange="updateScreen(this);">
<option value="Option A">Option A</option>
</select>
<select name="conditions_list" onChange="updateValue(this);">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br>
<input id="box1" name="test" type="checkbox" value="">box1<br>
<input id="box2" name="test" type="checkbox" value="">box2<br>
</div>
 

Thanks!

[acoder]

In updateScreen, it should be: var parent = input1.parentNode;

[phub11]

Hi!

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

function updateValue(input, scrn) {
//document.getElementById('box1').value = document.getElementById('selectField').value;
var parent = input.parentNode;
parent.getElementsByTagName("input")[0].value = input.value;
var parent = scrn.parentNode;
parent.getElementsByTagName("input")[0].value = scrn.value;
}
 
<div id="l1">
<select name="screens_list" onChange="updateValue(srcn);">
<option value="Option A">Option A</option>
</select>
<select name="conditions_list" onChange="updateValue(this);">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br>
<input id="box1" name="test" type="checkbox" value="">box1<br>
<input id="box2" name="test" type="checkbox" value="">box2<br>
</div>
 

Any ideas?

Thanks!

[acoder]

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?

[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 :

var checkboxes = cells[i].getElementsByTagName("input");
for (j = 0; j < checkboxes.length; j++) {
if (checkboxes[j].checked) {
checkedNams += checkboxes[j].name;
checkedVals = checkboxes[j].value;
checkedScreen = checkboxes[0].value;
checkedData = checkedData.concat(checkedCels + " with checked boxes " + checkedNams + " and Value:" + checkedVals + " and Option:" + checkedScreen);
}
}
 
function updateValue(input) {
//document.getElementById('box1').value = document.getElementById('selectField').value;
//document.getElementById('box2').value = document.getElementById('selectField').value;
var parent = input.parentNode;
parent.getElementsByTagName("input")[1].value = input.value;
parent.getElementsByTagName("input")[2].value = input.value;
}
 
function updateScreen(input1) {
//document.getElementById('screen').value = document.getElementById('selectScreen').value;
var parent1 = input1.parentNode;
parent1.getElementsByTagName("input")[0].value = input1.value;
}
 
<div id="l1">
<select name="screens_list" onChange="updateScreen(this);">
<option value="Option A">Option A</option>
</select>
<input id="screen" name="screen[]" value="" type="hidden">
<select name="conditions_list" onChange="updateValue(this);">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br>
<input id="box1" name="box1" type="checkbox" value="">box1<br>
<input id="box2" name="box2" type="checkbox" value="">box2<br>
</div>
 

Thanks!

[acoder]

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?

[phub11]

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]

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.

[phub11]

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?!

[phub11]

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]

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.

[phub11]

The idea is to have multiple draggables, with "screen" being set differently for each type of draggable.

[acoder]

So with multiple drop-downs, how are you differentiating between each draggable?

[phub11]

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]

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