listing populated TD IDs (+ contents) after drag-drop

**acoder** · Feb 11 '08, 03:24 PM

To get the checkboxes in a particular cell:
[code=javascript]// get the cell
var cell = document.getEle mentById(cellID );
// get the checkboxes (assuming no other input types)
var checkboxes = cell.getElement sByTagName("inp ut");[/code]To get the checked state, the "checked" property will be true or false. You can get the value using the value property.

**phub11** · Feb 11 '08, 05:42 PM

Thank you "acoder" for the reply.

Since I'm a JS newbie, I'll ask a few questions so I understand how to follow on from this (I'm still a bit confused with JS syntax):

1) The CellID part of "document.getEl ementById(cellI D)" I assume is a variable refering to the ID of each TD (or DIV in my code). If so, do I need to make a loop for "box1" through "box4" (i.e., box$i).

2) I assume I need something like "if (document.getEl ementById('box$ i').checked)" or, since "var checkboxes = cell.getElement sByTagName("inp ut")" am I way off mark?

3) Would I have this function called with "onSubmit"?

Thanks again!

**acoder** · Feb 11 '08, 07:27 PM

Originally posted by phub11

1) The CellID part of "document.getEl ementById(cellI D)" I assume is a variable refering to the ID of each TD (or DIV in my code). If so, do I need to make a loop for "box1" through "box4" (i.e., box$i).

That would be "cell1", "cell2", etc. You could get the table and then call getElementsByTa gName("div") if you're going to loop over all the cells.

Originally posted by phub11

2) I assume I need something like "if (document.getEl ementById('box$ i').checked)" or, since "var checkboxes = cell.getElement sByTagName("inp ut")" am I way off mark?

checkboxes would contain an array of checkboxes. You can loop over the array and get the checked property, e.g. checkboxes[i].checked.

Originally posted by phub11

3) Would I have this function called with "onSubmit"?

That depends on when you need this information.

**phub11** · Feb 11 '08, 07:56 PM

Thanks for the response!

Unfortunately I'm getting more confused. Would it be possible to put some code up which will do roughly want I'm trying to achieve?

If it will help, I've taken the liberty of attaching the code I have at the moment (with CODE tags!!!!!) - NOTE: This doesn't work with IE5 at the moment (dunno why)....

P.S: Thanks for all your help, I really appreciate it!

Code:

<html>
<head>
  <title>Untitled Page</title>
  <script src="/script.aculo.us/lib/prototype.js"
 type="text/javascript"></script>
  <script src="/script.aculo.us/src/scriptaculous.js"
 type="text/javascript"></script>
  <script src="/script.aculo.us/src/effects.js"
 type="text/javascript"></script>
  <script src="/script.aculo.us/src/dragdrop.js"
 type="text/javascript"></script>

<script type="text/javascript">

box1Array = new Array();

function AddToDropTargets(id)
{
Droppables.add(id, {accept:null,onDrop: function(sourceelement,targetelement)
{
targetelement.innerHTML = sourceelement.innerHTML;
box1Alt = new Array();
box1Alt = [id];
box1Array = box1Array.concat(box1Alt);
}
});
}

function dragstuff()
{
if (!Draggable)
{
alert("libraries did not load");
return;
}
//define draggable element
new Draggable(l1,{revert:true});
//define possible drop targets
AddToDropTargets('cell1');
AddToDropTargets('cell2');
AddToDropTargets('cell3');
AddToDropTargets('cell4');
}

function updateValue() {
    document.getElementById('box1').value = document.getElementById('selectField').value;
    document.getElementById('box2').value = document.getElementById('selectField').value;
    document.getElementById('box3').value = document.getElementById('selectField').value;
    document.getElementById('box4').value = document.getElementById('selectField').value;
}

function createOrder111()
{
box1=document.forms[0].box1;
txt="";
for (i=0;i<box1.length;++ i)
  {
  if (box1[i].checked)
    {
    txt=txt + box1[i].value + " ";
    }
  }
alert("Fox Box1, you selected condition " + txt + " in " + myArray);
}

function createOrder()
{
var cell = document.getElementById(cellID);
var checkboxes = cell.getElementsByTagName("input");
alert("Fox Box1, you selected condition " + checkboxes);
}
</script>

</head>
<body onload="dragstuff(); updateValue(); createOrder();">

<div id="l1">

<select name="conditions_list" id="selectField" onChange="updateValue();">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br>
<span class="style1">
<span class="style5">
  <span style="color: rgb(255, 0, 0);">BOX1</span>
  <input id="box1" name="box1[]" value="" type="checkbox">
  <span style="color: rgb(255, 0, 0);">BOX2</span>
  <input id="box2" name="box2[]" value="" type="checkbox"><br>
  <span style="color: rgb(255, 0, 0);">BOX3</span>
  <input id="box3" name="box3[]" value="" type="checkbox">
  <span style="color: rgb(255, 0, 0);">BOX4</span>
  <input id="box4" name="box4[]" value="" type="checkbox">
</span>
</span>
</div>
<br>
<form action="junk2.php" method="post" name="form1"
 class="style1 style1">
  <table style="text-align: center;" border="2"
 cellpadding="2" cellspacing="2"">
    <tbody>
      <tr>
        <td style="width: 150px; height: 100px;">
        <div id="cell1">A1<br>
Empty</div>
        </td>
        <td style="width: 150px; height: 100px;">
        <div id="cell2">A2<br>
Empty</div>
        </td>
      </tr>
      <tr>
        <td style="width: 150px; height: 100px;">
        <div id="cell3">B1<br>
Empty</div>
        </td>
        <td style="width: 150px; height: 100px;">
        <div id="cell4">B2<br>
Empty</div>
        </td>
      </tr>
    </tbody>
  </table>
  <br>
  <input name="Submit" value="Submit" type="submit">
<input type="button" onclick="createOrder()" value="Send order">
<input name="reset" type="reset">
</form>
</body>
</html>

**acoder** · Feb 12 '08, 07:48 AM

Maybe something like this will work (assuming table has id "table1"):
[CODE=javascript]function createOrder()
{
var table = document.getEle mentById("table 1");
var cells = table.getElemen tsByTagName("di v");
for (i = 0; i < cells.length; i++) {
var checkedVals = "";
var checkboxes = cells[i].getElementsByT agName("input") ;
for (j = 0; j < checkboxes.leng th; j++) {
if (checkboxes[j].checked) checkedVals += checkboxes[j].value+",";
}
alert("For "+cells[i].id+", you selected values " + checkedVals);
}
}[/CODE]

**phub11** · Feb 12 '08, 04:19 PM

Great, thanks for your help!

It *almost* does what I want it to!

**acoder** · Feb 13 '08, 07:43 AM

That's good. So you can adapt it to what you require. If you get stuck, just ask!

**phub11** · Feb 18 '08, 04:24 PM

Hi,

For some reason I am having trouble getting this to work in IE6 (works fine in FF2). The "cells" variable gets assigned, but not the value of the checked boxes:

Code:

function updateValue() {
    document.getElementById('box1').value = document.getElementById('selectField').value;
}

and this...

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;
}
if ( checkedVals != "" ){
checkedData = checkedData.concat("For "+checkedCels+" you selected "+checkedScreen+" "+checkedNams+" with value "+checkedVals+" end,")
		}
}
document.form1.sendData.value = checkedData;
}

**acoder** · Feb 18 '08, 07:02 PM

Originally posted by phub11

For some reason I am having trouble getting this to work in IE6 (works fine in FF2). The "cells" variable gets assigned, but not the value of the checked boxes:

Does the checked property remain the same? It may be that when appended, the checkbox state is reset.

**phub11** · Feb 19 '08, 04:07 AM

Thanks for the post!

In an effort to troubleshoot, I think I've figured out the source of the problem. It relates to how the cloned box is handled after the drop - but beyond that I'm stuck. The stripped down code below works fine in FF2 but not in IE6. If possible, could someone edit the following code to work in IE6 too (I'm too frustrated to figure it out)? Cheers!

Code:

<html>
<head>
<title>Checkbox changer</title>

  <script src="/script.aculo.us/lib/prototype.js"
 type="text/javascript"></script>
  <script src="/script.aculo.us/src/scriptaculous.js"
 type="text/javascript"></script>

<script type="text/javascript">

function AddToDropTargets(id)
{
Droppables.add(id, {accept:null,onDrop: function(sourceelement,targetelement)
{
targetelement.innerHTML = sourceelement.innerHTML;
}
});
}

function dragstuff()
{
if (!Draggable)
{
alert("libraries did not load");
return;
}

//define draggable element
new Draggable(l1,{revert:true});
//define possible drop targets
AddToDropTargets('cell1');
AddToDropTargets('cell2');
}

function updateScreen() {
document.getElementById('screen').value = document.getElementById('selectScreen').value;
}

function updateValue() {
//document.getElementById('screen').value = document.getElementById('selectScreen').value;
    document.getElementById('box1').value = document.getElementById('selectField').value;
    document.getElementById('box2').value = document.getElementById('selectField').value;
    document.getElementById('box3').value = document.getElementById('selectField').value;
    document.getElementById('box4').value = document.getElementById('selectField').value;
    document.getElementById('box5').value = document.getElementById('selectField').value;
    document.getElementById('box6').value = document.getElementById('selectField').value;
}


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("For "+checkedCels+" you selected "+checkedScreen+" "+checkedNams+" with value "+checkedVals+" end,")
//		}
}
document.form1.sendData.value = checkedData;
}

function updateValue() {
  var tmp = document.getElementById('selectField').value;
  if (document.getElementById('box1').checked) {
    document.getElementById('box1').value = tmp;
    document.getElementById('CBvalue').value = tmp;
  }  
}
</script>

</head>
<body onload="dragstuff(); updateValue(); updateScreen();">

<div id="l1">
<select name="screens_list" id="selectScreen" onChange="updateScreen();">
<option value="Screen 1">Scr1</option>
</select>
<input id="screen" name="screen[]" value="" type="hidden">
<select name="conditions_list" id="selectField" onChange="updateValue();">
<option value="">#</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br>
<span style="color: rgb(255, 0, 0);">BOX1</span><input
 id="box1" name="box1[]" value="" type="checkbox">
<span style="color: rgb(51, 204, 0);">BOX2</span><input
 id="chkexpertH" name="box2[]" value="" type="checkbox"><br>
<span style="color: rgb(51, 51, 255);">BOX3</span><input
 id="chkexpertL" name="box3[]" value="" type="checkbox">
<span style="color: rgb(0, 0, 0);">BOX4</span><input
 id="chkexpertM" name="box4[]" value="" type="checkbox"><br>
<span style="color: rgb(153, 153, 153);">BOX5</span><input
 id="chkexpertX" name="box5[]" value="" type="checkbox">
<span style="color: rgb(255, 102, 0);">BOX6</span><input
 id="chkexpertF" name="box6[]" value="" type="checkbox">
</div>

<br>
<form action="phpArrayTest.php" method="post" name="form1"
 class="style1 style1">
<table style="text-align: center;" id="table1"
 border="2" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td colspan="6" rowspan="1">Table 1</td>
    </tr>
    <tr>
      <td style="width: 150px; height: 100px;">
      <div style="position: relative;" id="cell1">A1<br>
Empty</div>
      </td>
    </tr>
    <tr>
      <td colspan="6" rowspan="1">Table 2</td>
    </tr>
    <tr>
      <td style="width: 150px; height: 100px;">
      <div style="position: relative;" id="cell2">A1<br>
Empty</div>
      </td>
    </tr>
  </tbody>
</table>

Current value of checked 'BOX1': <input type="text" value="" id='CBvalue';>

</body>
</html>

Thanks for all the help!

**acoder** · Feb 19 '08, 07:48 AM

IE has a problem with dynamically created checkboxes. The state of the checkbox is reset when added to the page. The workaround is to check the checkbox after adding to the page.

**phub11** · Feb 19 '08, 01:48 PM

Hi,

Thanks for the reply.

I think I see what you're getting at, though it screws up the cell assignment I have. Looks like I'll need separate code for FF and IE!

P.S: I still can't figure out how to update variables from more than 1 table.

Is it possible to split the above example into two separate tables, while combining the arrays (i.e., modify the "createOrde r" function)?

Cheers!

**acoder** · Feb 20 '08, 07:47 AM

Originally posted by phub11

I think I see what you're getting at, though it screws up the cell assignment I have. Looks like I'll need separate code for FF and IE!

No, don't do that! How does it mess it up?

Originally posted by phub11

P.S: I still can't figure out how to update variables from more than 1 table.

Is it possible to split the above example into two separate tables, while combining the arrays (i.e., modify the "createOrde r" function)?

I think this is in your other thread. See my reply there.

listing populated TD IDs (+ contents) after drag-drop

listing populated TD IDs (+ contents) after drag-drop

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment