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.getEle mentById("table 2");", but it didn't work.

Thanks for any suggestions!

[wyatt]

The following should do what you're looking for:

[CODE=javascript]
var table = document.getEle mentById("table 1");
var cells = table.getElemen tsByTagName("di v");

table = document.getEle mentById("table 2");
var cells2 = table.getElemen tsByTagName("di v");

var cells = cells.concat(ce lls2);

for (i = 0; i < cells.length; i++) {
checkedCels = cells[i].id;
var checkboxes = cells[i].getElementsByT agName("input") ;
[/CODE]

[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 "checkedDat a" 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 "checkedDat a" 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 "checkedCel s" 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 "checkedDat a".

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

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!