Hi all,
Below is a simple script (adapted from http://forums.asp.net/p/1037158/1453597.aspx) which allows me to drop clones of an object into a table; however, I'd like to have (value="101") set to the value of "cond", as well as "addncomment101 . Also, I need to use some kind of array to track which cells of the table have been filled. I'd like to use JavaScript to do this, but I'm a JS newbie so I'm stuck. Ultimately, these variables will be passed to PHP.
Any suggestions would be great! Thanks.
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitl ed Page</title>
<script src="/script.aculo.us/lib/prototype.js"
type="text/javascript"></script>
<script src="/script.aculo.us/src/scriptaculous.j s"
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">
//add element to the droppable targets note the anonoymous function used as a event handler which
//in this case just changes the contents of the target text to the source element's
function AddToDropTarget s( id)
{
Droppables.add( id, {accept:null,on Drop: function(source element,targete lement)
{
targetelement.i nnerHTML = sourceelement.i nnerHTML;
}
});
}
function dragstuff()
{
if (!Draggable)
{
alert("librarie s did not load");
return;
}
//define draggable element
new Draggable(l1,{r evert:true});
//define possible drop targets
AddToDropTarget s('cell1');
AddToDropTarget s('cell2');
AddToDropTarget s('cell3');
AddToDropTarget s('cell4');
}
</script>
</head>
<body onload="dragstu ff()">
<div id="l1">
<br>
Condtion:
<select name="cond101">
<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">
Box1
<input name="array1[]" value="101" type="checkbox" >
Box2
<input name="array2[]" value="101" type="checkbox" >
<br>
</span></span>
<select name="addncomme nts101">
<option value="">+ Comments?</option>
<option value="Good">Go od</option>
<option value="Bad">Bad </option>
<option value="Other">O ther</option>
</select>
</div>
<br>
<form action="junk2.p hp" method="post" name="form1"
class="style1 style1">
<table style="text-align: center;" border="2"
cellpadding="2" cellspacing="2" >
<tbody>
<tr>
<td style="width: 130px; height: 100px;">
<div id="cell1">A1<b r>
Empty</div>
</td>
<td style="width: 130px; height: 100px;">
<div id="cell2">A2<b r>
Empty</div>
</td>
</tr>
<tr>
<td style="width: 130px; height: 100px;">
<div id="cell3">B1<b r>
Empty</div>
</td>
<td style="width: 130px; height: 100px;">
<div id="cell4">B2<b r>
Empty</div>
</td>
</tr>
</tbody>
</table>
<br>
<input name="Submit" value="Submit" type="submit">
<input name="reset" type="reset"></form>
</body>
</html>[/HTML]
Below is a simple script (adapted from http://forums.asp.net/p/1037158/1453597.aspx) which allows me to drop clones of an object into a table; however, I'd like to have (value="101") set to the value of "cond", as well as "addncomment101 . Also, I need to use some kind of array to track which cells of the table have been filled. I'd like to use JavaScript to do this, but I'm a JS newbie so I'm stuck. Ultimately, these variables will be passed to PHP.
Any suggestions would be great! Thanks.
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitl ed Page</title>
<script src="/script.aculo.us/lib/prototype.js"
type="text/javascript"></script>
<script src="/script.aculo.us/src/scriptaculous.j s"
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">
//add element to the droppable targets note the anonoymous function used as a event handler which
//in this case just changes the contents of the target text to the source element's
function AddToDropTarget s( id)
{
Droppables.add( id, {accept:null,on Drop: function(source element,targete lement)
{
targetelement.i nnerHTML = sourceelement.i nnerHTML;
}
});
}
function dragstuff()
{
if (!Draggable)
{
alert("librarie s did not load");
return;
}
//define draggable element
new Draggable(l1,{r evert:true});
//define possible drop targets
AddToDropTarget s('cell1');
AddToDropTarget s('cell2');
AddToDropTarget s('cell3');
AddToDropTarget s('cell4');
}
</script>
</head>
<body onload="dragstu ff()">
<div id="l1">
<br>
Condtion:
<select name="cond101">
<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">
Box1
<input name="array1[]" value="101" type="checkbox" >
Box2
<input name="array2[]" value="101" type="checkbox" >
<br>
</span></span>
<select name="addncomme nts101">
<option value="">+ Comments?</option>
<option value="Good">Go od</option>
<option value="Bad">Bad </option>
<option value="Other">O ther</option>
</select>
</div>
<br>
<form action="junk2.p hp" method="post" name="form1"
class="style1 style1">
<table style="text-align: center;" border="2"
cellpadding="2" cellspacing="2" >
<tbody>
<tr>
<td style="width: 130px; height: 100px;">
<div id="cell1">A1<b r>
Empty</div>
</td>
<td style="width: 130px; height: 100px;">
<div id="cell2">A2<b r>
Empty</div>
</td>
</tr>
<tr>
<td style="width: 130px; height: 100px;">
<div id="cell3">B1<b r>
Empty</div>
</td>
<td style="width: 130px; height: 100px;">
<div id="cell4">B2<b r>
Empty</div>
</td>
</tr>
</tbody>
</table>
<br>
<input name="Submit" value="Submit" type="submit">
<input name="reset" type="reset"></form>
</body>
</html>[/HTML]
Comment