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<b r>
Empty</div>
</td>
<td style="width: 150px; height: 100px;">
<div id="cell2">A2<b r>
Empty</div>
</td>
</tr>
<tr>
<td style="width: 150px; height: 100px;">
<div id="cell3">B1<b r>
Empty</div>
</td>
<td style="width: 150px; height: 100px;">
<div id="cell4">B2<b r>
Empty</div>
</td>
</tr>
</tbody>
</table>
[/HTML]
DRAGGABLE CHECKBOXES

[HTML]<div id="l1">
<select name="condition s_list" id="selectField " onChange="updat eValue();">
<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

Subscribe Reply

1369

acoder

16,027

Recognized Expert Moderator MVP

To get the checkboxes in a particular cell:

Expand|Select|Wrap|Line Numbers

 // get the cell

var cell = document.getElementById(cellID);

// get the checkboxes (assuming no other input types)

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

Feb 11 '08 #3

acoder

16,027

Recognized Expert Moderator MVP

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.

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.

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

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

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

 function createOrder()

{

  var table = document.getElementById("table1");

  var cells = table.getElementsByTagName("div");

  for (i = 0; i < cells.length; i++) {

    var checkedVals = "";

    var checkboxes = cells[i].getElementsByTagName("input");

    for (j = 0; j < checkboxes.length; j++) {

      if (checkboxes[j].checked) checkedVals += checkboxes[j].value+",";

    }

    alert("For "+cells[i].id+", you selected values " + checkedVals);

  }

}

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

 
function updateValue() {

    document.getElementById('box1').value = document.getElementById('selectField').value;

}

and this...

Expand|Select|Wrap|Line Numbers

 
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;

}

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

Similar topics

5838

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 module Dim WithEvents tc As testControl 'button1_click (for example)

Visual Basic 4 / 5 / 6

1895

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 there a way for me to know about it? (In MFC, for example, mouse movements are captured) Or do I just have to follow DragEnter/DragLeave and deduce from that?

C# / C Sharp

1310

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 methods in total are listening to the DragDrop event of the control? If I can't find out the exact number of methods listening to the DragDrop event, can I somehow remove all listeners of that event at once? I tried using m_Control.DragDrop =...

C# / C Sharp

3878

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 your help, Here is the code.

Visual Basic .NET

3786

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 target node in the treeview and auto expand it if applicable... but after a fair bit of head scratching I can't find any easy way to accomplish this. I think what i really need is the equivalent of the HitTest method from the COM version of the...

Visual Basic .NET

3995

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 same windows running in different instances of the application the "dropped" data comes across as a system.__ComObject and I can't CType it to my class to extract the data. I've been searching for hours and haven't found any solution so I am...

Visual Basic .NET

1614

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 displayed based on PDF files in a home directory (It would be nice if the MetaTag in a PDF file could be used here)

PHP

3246

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 variable set to this: --- $dir = getcwd() . "\\" . $nav; --- but for some reason the script does not actually display the contents of the directory if you change from the directory the script is located in. Here is my code if someone is willing...

PHP

2169

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 in a given directory to be downloaded. The PHP utility that I had been using for that purpose had a security hole that was exploited by hackers.

Perl

8438

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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

8348

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

8549

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

8636

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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

6187

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 presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

5660

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 then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

4186

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

2765

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 we have to send another system

C# / C Sharp

1761

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 can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General