appending to variable using document.getElementById

[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:
[code=javascript]// get checkboxes' checked property
var checked = [];
for (i = 0; i < checkboxes.leng th; i++) { // assuming checkboxes contains checkboxes
checked[i] = checkboxes.chec ked;
}
// ...then when checkboxes cloned, reset their checked properties:
// assuming same number of checkboxes
for (i = 0; i < clonedCheckboxe s.length; i++) {
clonedCheckboxe s[i].checked = checked[i];
}[/code]

[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 "clonedCheckbox es". 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/scriptaculous/show/Droppables.add

(function asignDragAndDro p)

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/defaultCheckedE xample.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:[CODE=javascript]function updateValue(inp ut) {
var parent = input.parentNod e;
parent.getEleme ntsByTagName("i nput")[0].value = input.value;
}[/CODE]

[phub11]

Hooray, it works - thanks!

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

Thank you so much!