473,508 Members | 2,152 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

127 New Member
Hi all,

I have a table to which an array of cloned checkboxes can be dropped in (using scriptabulous). Could someone please tell me how I can get a list of all populated cells, and which checkboxes within each cell are checked (wuth their dynamically assigned values). For example:

cell 5 => condition 2 selected => box1, box3 checked
cell 9 => condition 1 selected => box4 checked

P.S: Below are relevant(?) snippets of my code.

Thanks!

TABLE (THE TARGET)

[HTML]<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>
[/HTML]
DRAGGABLE CHECKBOXES

[HTML]<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>[/HTML]
Feb 11 '08 #1
13 1352
acoder
16,027 Recognized Expert Moderator MVP
To get the checkboxes in a particular cell:
Expand|Select|Wrap|Line Numbers
  1. // get the cell
  2. var cell = document.getElementById(cellID);
  3. // get the checkboxes (assuming no other input types)
  4. var checkboxes = cell.getElementsByTagName("input");
To get the checked state, the "checked" property will be true or false. You can get the value using the value property.
Feb 11 '08 #2
phub11
127 New Member
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.getElementById(cellID)" 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.getElementById('box$i').checked)" or, since "var checkboxes = cell.getElementsByTagName("input")" am I way off mark?

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

Thanks again!
Feb 11 '08 #3
acoder
16,027 Recognized Expert Moderator MVP
1) The CellID part of "document.getElementById(cellID)" 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 getElementsByTagName("div") if you're going to loop over all the cells.

2) I assume I need something like "if (document.getElementById('box$i').checked)" or, since "var checkboxes = cell.getElementsByTagName("input")" 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.

3) Would I have this function called with "onSubmit"?
That depends on when you need this information.
Feb 11 '08 #4
phub11
127 New Member
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!

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3.   <title>Untitled Page</title>
  4.   <script src="/script.aculo.us/lib/prototype.js"
  5.  type="text/javascript"></script>
  6.   <script src="/script.aculo.us/src/scriptaculous.js"
  7.  type="text/javascript"></script>
  8.   <script src="/script.aculo.us/src/effects.js"
  9.  type="text/javascript"></script>
  10.   <script src="/script.aculo.us/src/dragdrop.js"
  11.  type="text/javascript"></script>
  12.  
  13. <script type="text/javascript">
  14.  
  15. box1Array = new Array();
  16.  
  17. function AddToDropTargets(id)
  18. {
  19. Droppables.add(id, {accept:null,onDrop: function(sourceelement,targetelement)
  20. {
  21. targetelement.innerHTML = sourceelement.innerHTML;
  22. box1Alt = new Array();
  23. box1Alt = [id];
  24. box1Array = box1Array.concat(box1Alt);
  25. }
  26. });
  27. }
  28.  
  29. function dragstuff()
  30. {
  31. if (!Draggable)
  32. {
  33. alert("libraries did not load");
  34. return;
  35. }
  36. //define draggable element
  37. new Draggable(l1,{revert:true});
  38. //define possible drop targets
  39. AddToDropTargets('cell1');
  40. AddToDropTargets('cell2');
  41. AddToDropTargets('cell3');
  42. AddToDropTargets('cell4');
  43. }
  44.  
  45. function updateValue() {
  46.     document.getElementById('box1').value = document.getElementById('selectField').value;
  47.     document.getElementById('box2').value = document.getElementById('selectField').value;
  48.     document.getElementById('box3').value = document.getElementById('selectField').value;
  49.     document.getElementById('box4').value = document.getElementById('selectField').value;
  50. }
  51.  
  52. function createOrder111()
  53. {
  54. box1=document.forms[0].box1;
  55. txt="";
  56. for (i=0;i<box1.length;++ i)
  57.   {
  58.   if (box1[i].checked)
  59.     {
  60.     txt=txt + box1[i].value + " ";
  61.     }
  62.   }
  63. alert("Fox Box1, you selected condition " + txt + " in " + myArray);
  64. }
  65.  
  66. function createOrder()
  67. {
  68. var cell = document.getElementById(cellID);
  69. var checkboxes = cell.getElementsByTagName("input");
  70. alert("Fox Box1, you selected condition " + checkboxes);
  71. }
  72. </script>
  73.  
  74. </head>
  75. <body onload="dragstuff(); updateValue(); createOrder();">
  76.  
  77. <div id="l1">
  78.  
  79. <select name="conditions_list" id="selectField" onChange="updateValue();">
  80. <option value=""></option>
  81. <option value="1">1</option>
  82. <option value="2">2</option>
  83. <option value="3">3</option>
  84. <option value="4">4</option>
  85. </select>
  86. <br>
  87. <span class="style1">
  88. <span class="style5">
  89.   <span style="color: rgb(255, 0, 0);">BOX1</span>
  90.   <input id="box1" name="box1[]" value="" type="checkbox">
  91.   <span style="color: rgb(255, 0, 0);">BOX2</span>
  92.   <input id="box2" name="box2[]" value="" type="checkbox"><br>
  93.   <span style="color: rgb(255, 0, 0);">BOX3</span>
  94.   <input id="box3" name="box3[]" value="" type="checkbox">
  95.   <span style="color: rgb(255, 0, 0);">BOX4</span>
  96.   <input id="box4" name="box4[]" value="" type="checkbox">
  97. </span>
  98. </span>
  99. </div>
  100. <br>
  101. <form action="junk2.php" method="post" name="form1"
  102.  class="style1 style1">
  103.   <table style="text-align: center;" border="2"
  104.  cellpadding="2" cellspacing="2"">
  105.     <tbody>
  106.       <tr>
  107.         <td style="width: 150px; height: 100px;">
  108.         <div id="cell1">A1<br>
  109. Empty</div>
  110.         </td>
  111.         <td style="width: 150px; height: 100px;">
  112.         <div id="cell2">A2<br>
  113. Empty</div>
  114.         </td>
  115.       </tr>
  116.       <tr>
  117.         <td style="width: 150px; height: 100px;">
  118.         <div id="cell3">B1<br>
  119. Empty</div>
  120.         </td>
  121.         <td style="width: 150px; height: 100px;">
  122.         <div id="cell4">B2<br>
  123. Empty</div>
  124.         </td>
  125.       </tr>
  126.     </tbody>
  127.   </table>
  128.   <br>
  129.   <input name="Submit" value="Submit" type="submit">
  130. <input type="button" onclick="createOrder()" value="Send order">
  131. <input name="reset" type="reset">
  132. </form>
  133. </body>
  134. </html>
  135.  
Feb 11 '08 #5
acoder
16,027 Recognized Expert Moderator MVP
Maybe something like this will work (assuming table has id "table1"):
Expand|Select|Wrap|Line Numbers
  1. function createOrder()
  2. {
  3.   var table = document.getElementById("table1");
  4.   var cells = table.getElementsByTagName("div");
  5.   for (i = 0; i < cells.length; i++) {
  6.     var checkedVals = "";
  7.     var checkboxes = cells[i].getElementsByTagName("input");
  8.     for (j = 0; j < checkboxes.length; j++) {
  9.       if (checkboxes[j].checked) checkedVals += checkboxes[j].value+",";
  10.     }
  11.     alert("For "+cells[i].id+", you selected values " + checkedVals);
  12.   }
  13. }
Feb 12 '08 #6
phub11
127 New Member
Great, thanks for your help!

It *almost* does what I want it to!
Feb 12 '08 #7
acoder
16,027 Recognized Expert Moderator MVP
That's good. So you can adapt it to what you require. If you get stuck, just ask!
Feb 13 '08 #8
phub11
127 New Member
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:

Expand|Select|Wrap|Line Numbers
  1. function updateValue() {
  2.     document.getElementById('box1').value = document.getElementById('selectField').value;
  3. }
  4.  
and this...
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. }
  18. if ( checkedVals != "" ){
  19. checkedData = checkedData.concat("For "+checkedCels+" you selected "+checkedScreen+" "+checkedNams+" with value "+checkedVals+" end,")
  20.         }
  21. }
  22. document.form1.sendData.value = checkedData;
  23. }
  24.  
Feb 18 '08 #9
acoder
16,027 Recognized Expert Moderator MVP
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.
Feb 18 '08 #10
phub11
127 New Member
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!

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title>Checkbox changer</title>
  4.  
  5.   <script src="/script.aculo.us/lib/prototype.js"
  6.  type="text/javascript"></script>
  7.   <script src="/script.aculo.us/src/scriptaculous.js"
  8.  type="text/javascript"></script>
  9.  
  10. <script type="text/javascript">
  11.  
  12. function AddToDropTargets(id)
  13. {
  14. Droppables.add(id, {accept:null,onDrop: function(sourceelement,targetelement)
  15. {
  16. targetelement.innerHTML = sourceelement.innerHTML;
  17. }
  18. });
  19. }
  20.  
  21. function dragstuff()
  22. {
  23. if (!Draggable)
  24. {
  25. alert("libraries did not load");
  26. return;
  27. }
  28.  
  29. //define draggable element
  30. new Draggable(l1,{revert:true});
  31. //define possible drop targets
  32. AddToDropTargets('cell1');
  33. AddToDropTargets('cell2');
  34. }
  35.  
  36. function updateScreen() {
  37. document.getElementById('screen').value = document.getElementById('selectScreen').value;
  38. }
  39.  
  40. function updateValue() {
  41. //document.getElementById('screen').value = document.getElementById('selectScreen').value;
  42.     document.getElementById('box1').value = document.getElementById('selectField').value;
  43.     document.getElementById('box2').value = document.getElementById('selectField').value;
  44.     document.getElementById('box3').value = document.getElementById('selectField').value;
  45.     document.getElementById('box4').value = document.getElementById('selectField').value;
  46.     document.getElementById('box5').value = document.getElementById('selectField').value;
  47.     document.getElementById('box6').value = document.getElementById('selectField').value;
  48. }
  49.  
  50.  
  51. function createOrder() {
  52. var checkedData = "";
  53. var table = document.getElementById("table1");
  54. var cells = table.getElementsByTagName("div");
  55. for (i = 0; i < cells.length; i++) {
  56. checkedCels = cells[i].id;
  57. var checkedNams = "";
  58. var checkedVals = "";
  59. var checkedScreen = "";
  60. var checkboxes = cells[i].getElementsByTagName("input");
  61. for (j = 0; j < checkboxes.length; j++) {
  62. if (checkboxes[j].checked) {
  63. checkedNams += checkboxes[j].name;
  64. }
  65. checkedVals = checkboxes[j].value;
  66. checkedScreen = checkboxes[0].value;
  67. //MIGHT NEED TO POP OFF FIRST ELEMENT IN checkboxes[].value TO REMOVE screen[]
  68. }
  69. //if ( checkedVals != "" ){
  70. checkedData = checkedData.concat("For "+checkedCels+" you selected "+checkedScreen+" "+checkedNams+" with value "+checkedVals+" end,")
  71. //        }
  72. }
  73. document.form1.sendData.value = checkedData;
  74. }
  75.  
  76. function updateValue() {
  77.   var tmp = document.getElementById('selectField').value;
  78.   if (document.getElementById('box1').checked) {
  79.     document.getElementById('box1').value = tmp;
  80.     document.getElementById('CBvalue').value = tmp;
  81.   }  
  82. }
  83. </script>
  84.  
  85. </head>
  86. <body onload="dragstuff(); updateValue(); updateScreen();">
  87.  
  88. <div id="l1">
  89. <select name="screens_list" id="selectScreen" onChange="updateScreen();">
  90. <option value="Screen 1">Scr1</option>
  91. </select>
  92. <input id="screen" name="screen[]" value="" type="hidden">
  93. <select name="conditions_list" id="selectField" onChange="updateValue();">
  94. <option value="">#</option>
  95. <option value="1">1</option>
  96. <option value="2">2</option>
  97. <option value="3">3</option>
  98. <option value="4">4</option>
  99. </select>
  100. <br>
  101. <span style="color: rgb(255, 0, 0);">BOX1</span><input
  102.  id="box1" name="box1[]" value="" type="checkbox">
  103. <span style="color: rgb(51, 204, 0);">BOX2</span><input
  104.  id="chkexpertH" name="box2[]" value="" type="checkbox"><br>
  105. <span style="color: rgb(51, 51, 255);">BOX3</span><input
  106.  id="chkexpertL" name="box3[]" value="" type="checkbox">
  107. <span style="color: rgb(0, 0, 0);">BOX4</span><input
  108.  id="chkexpertM" name="box4[]" value="" type="checkbox"><br>
  109. <span style="color: rgb(153, 153, 153);">BOX5</span><input
  110.  id="chkexpertX" name="box5[]" value="" type="checkbox">
  111. <span style="color: rgb(255, 102, 0);">BOX6</span><input
  112.  id="chkexpertF" name="box6[]" value="" type="checkbox">
  113. </div>
  114.  
  115. <br>
  116. <form action="phpArrayTest.php" method="post" name="form1"
  117.  class="style1 style1">
  118. <table style="text-align: center;" id="table1"
  119.  border="2" cellpadding="2" cellspacing="2">
  120.   <tbody>
  121.     <tr>
  122.       <td colspan="6" rowspan="1">Table 1</td>
  123.     </tr>
  124.     <tr>
  125.       <td style="width: 150px; height: 100px;">
  126.       <div style="position: relative;" id="cell1">A1<br>
  127. Empty</div>
  128.       </td>
  129.     </tr>
  130.     <tr>
  131.       <td colspan="6" rowspan="1">Table 2</td>
  132.     </tr>
  133.     <tr>
  134.       <td style="width: 150px; height: 100px;">
  135.       <div style="position: relative;" id="cell2">A1<br>
  136. Empty</div>
  137.       </td>
  138.     </tr>
  139.   </tbody>
  140. </table>
  141.  
  142. Current value of checked 'BOX1': <input type="text" value="" id='CBvalue';>
  143.  
  144. </body>
  145. </html>
  146.  
Thanks for all the help!
Feb 19 '08 #11
acoder
16,027 Recognized Expert Moderator MVP
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.
Feb 19 '08 #12
phub11
127 New Member
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 "createOrder" function)?

Cheers!
Feb 19 '08 #13
acoder
16,027 Recognized Expert Moderator MVP
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?

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 "createOrder" function)?
I think this is in your other thread. See my reply there.
Feb 20 '08 #14

Sign in to post your reply or Sign up for a free account.

Similar topics
7
5833
dragdrop UserControl
by: Kate | last post by:
Hi: I have a form with a picture box and some command buttons to make certain shapes appear in the picture box. The shapes are drawn on blank UserControls added like this: 'at top of form...
Visual Basic 4 / 5 / 6
3
1887
Catching DragDrop when out of the Control
by: yuval | last post by:
Hi DragDrop event is fired by the control accepting the drop If the drop is performed outside the controls I'm watching with events (like on another control/panel/window or outside my app) is...
C# / C Sharp
0
1293
Finding out number of subscribers to a controls DragDrop event
by: Flack | last post by:
Hello, Is it possible to find out how many methods are listening to a certain event? For example, if a number of methods subscribed to a controls DragDrop event using +=, can I find out how many...
C# / C Sharp
0
3863
DragDrop PictureBox
by: akh | last post by:
I want to use de Drag and Drop ´s event to move a picture box from a form and within a Picture Box. But I have behaviour if the MyPBox As PictureBox as the Globale varible or not Thanks for...
Visual Basic .NET
3
3773
TreeView DragDrop
by: Gary Dunne | last post by:
I'm writing an app that requires drag and drop operation between a ListView and a TreeView control. (The source is the ListView). During the drag drop operation I want to be able to detect the...
Visual Basic .NET
7
3976
DragDrop between 2 instances of same VB.Net program doesn't work
by: JohnR | last post by:
I am using dragdrop to drag and drop a custom class instance. When I drag/drop from one window to another window in the same application everything works fine. But when trying to move between the...
Visual Basic .NET
4
1603
Listing Directory Contents For a User
by: dnfertitta | last post by:
This is my task and I'd like some direction please: 1. Print company that houses user PDF files 2. User logs in and is brought to his own area 3. Dynamic customer inventory page is...
PHP
4
3234
Custom directory listing and $_GET question
by: techusky | last post by:
I have a *very* simple script written that displays the directory listing of the current working directory, but I am having some difficulty when I try to change folders. Basically, I have my $dir...
PHP
1
2155
Directory listing script
by: mocolvin | last post by:
I am looking for a Perl script that will do a cleaner job of listing the contents of a directory than what Apache does on its own. I would like the script to create a list of links to enable files...
Perl
0
7225
marktang
What is ONU?
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
General
0
7385
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
Online Marketing
0
7498
tracyyun
Discussion: How does Zigbee compare with other wireless protocols in smart home applications?
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
General
0
5629
agi2029
AI Job Threat for Devs
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
Career Advice
1
5053
isladogs
Access Europe - Using VBA to create a class based on a table - Wed 1 May
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
Microsoft Access / VBA
0
4707
Couldn’t get equations in html when convert word .docx file to html file in C#.
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
C# / C Sharp
0
1558
transfer the data from one system to another through ip address
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
C# / C Sharp
1
766
muto222
How to add payments to a PHP MySQL app.
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
PHP
0
418
bsmnconsultancy
Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...
General

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes
How to Post and Respond on Bytes
How to Promote and Link on Bytes
How to increase your Ranking on Bytes
Become a Recognized Expert on Bytes
Feedback Welcomed! Contact Us