...

View Full Version : Moving dynamic form elements around.



samuurai
08-15-2008, 03:51 PM
Hi Guys,

I am making a newsletter generator, it's viewable here: www.aquacouture.co.uk/email/makeemail.php

Basically I need to be able to re-order the images by clicking a button to swap the image above (whatever image that is) with the one below it.

I have a field there for "order", but I want to be able to do it visually, rather than entering numbers.

Does anyone have any links they could offer or code suggestions?

Thanks very much.

Beren

shyam
08-16-2008, 05:41 PM
you could put the image+table with up/down buttons inside a div and have them sequentially listed and then use insertBefore to move them around. or if you fancy something more flashy you could look into the draggable stuff like scriptaculous etc.

vwphillips
08-17-2008, 02:51 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function toggleEnabled(cb) {
while (cb.parentNode){
if (cb.nodeName=='DIV') break;
cb=cb.parentNode;
}
var ips=cb.getElementsByTagName('INPUT');
for (var zxc0=1;zxc0<ips.length;zxc0++){
ips[zxc0].setAttribute('disabled','disabled');
if (!ips[0].checked) ips[zxc0].removeAttribute('disabled');
}
var ta=cb.getElementsByTagName('TEXTAREA');
for (var zxc1=0;zxc1<ta.length;zxc1++){
ta[zxc1].setAttribute('disabled','disabled');
if (!ips[0].checked) ta[zxc1].removeAttribute('disabled');
}
zxcNotRequired(cb.parentNode);
}

function zxcNotRequired(zxcp){
var zxcdivs=zxcp.getElementsByTagName('DIV');
for (var zxc0=0;zxc0<zxcdivs.length;zxc0++){
var zxcips=zxcdivs[zxc0].getElementsByTagName('INPUT');
zxcdivs[zxc0].use=true;
if (zxcips[0].checked){
zxcdivs[zxc0].use=false;
zxcp.appendChild(zxcdivs[zxc0]);
}
}
zxcReNumber(zxcp);
}

function zxcMoveUp(zxcbut){
while (zxcbut.parentNode){
if (zxcbut.nodeName=='DIV') break;
zxcbut=zxcbut.parentNode;
}
var zxcp=zxcbut.parentNode;
var zxcdivs=zxcp.getElementsByTagName('DIV');
for (var zxc1=0;zxc1<zxcdivs.length;zxc1++){
if (zxcdivs[zxc1]==zxcbut&&zxcdivs[zxc1-1]){
zxcp.insertBefore(zxcbut,zxcdivs[zxc1-1]);
}
}
zxcReNumber(zxcp);
}

function zxcReNumber(zxcp){
var zxcdivs=zxcp.getElementsByTagName('DIV');
for (var zxc1=0;zxc1<zxcdivs.length;zxc1++){
var zxcips=zxcdivs[zxc1].getElementsByTagName('INPUT')
zxcips[2].value=!zxcips[0].checked?zxc1+1:'NA';
zxcips[1].style.visibility=zxcips[0].checked||zxc1==0?'hidden':'visible';
}


}
/*]]>*/
</script></head>

<body>
<div>
<div>
<img src="http://www.aquacouture.co.uk/photos/shoots/June_08/20080629Aqua_0051.jpg" alt="">
<table>
<tr>

<td align="right"><p>Do not use this photo:</p></td>
<td>
<input type="checkbox" name="20080629Aqua_0051___jpg[]" onclick="toggleEnabled(this)" id="20080629Aqua_0051___jpgcheck">
<input type="button" name="" value="Move Up" onclick="zxcMoveUp(this);"/>
</td>
</tr>
<tr>
<td align="right"><p>Order: </p></td>
<td><input id="20080629Aqua_0051___jpgorder" type="text" size="2"></td>
</td>
<tr>

<td align="right"><p>Description:</p></td>
<td colspan="2"><textarea rows="2" cols="25" name="20080629Aqua_0051___jpg[]" id="20080629Aqua_0051___jpgdescription">1</textarea></td>
</tr>
<tr>
<td align="right"><p>Label:</p></td>
<td colspan="2"><input type="text" size="29" name="20080629Aqua_0051___jpg[]" id="20080629Aqua_0051___jpglabel"></td>
</tr>

<tr>
<td align="right"><p>Price:</p></td>
<td><input type="text" size="29" name="20080629Aqua_0051___jpg[]" id="20080629Aqua_0051___jpgprice"><input type="hidden" name="filename[]" value="20080629Aqua_0051___jpg"></td>
</tr>
</table>
</div>
<div>
<img src="http://www.aquacouture.co.uk/photos/shoots/June_08/20080629Aqua_0173.jpg" alt="">
<table>
<tr>

<td align="right"><p>Do not use this photo:</p></td>
<td><input type="checkbox" name="20080629Aqua_0173___jpg[]" onclick="toggleEnabled(this)" id="20080629Aqua_0173___jpgcheck">
<input type="button" name="" value="Move Up" onclick="zxcMoveUp(this);"/>
</td>
</tr>
<tr>
<td align="right"><p>Order: </p></td>
<td><input id="20080629Aqua_0173___jpgorder" type="text" size="2"></td>
</td>
<tr>

<td align="right"><p>Description:</p></td>
<td colspan="2"><textarea rows="2" cols="25" name="20080629Aqua_0173___jpg[]" id="20080629Aqua_0173___jpgdescription">2</textarea></td>
</tr>
<tr>
<td align="right"><p>Label:</p></td>
<td colspan="2"><input type="text" size="29" name="20080629Aqua_0173___jpg[]" id="20080629Aqua_0173___jpglabel"></td>
</tr>

<tr>
<td align="right"><p>Price:</p></td>
<td><input type="text" size="29" name="20080629Aqua_0173___jpg[]" id="20080629Aqua_0173___jpgprice"><input type="hidden" name="filename[]" value="20080629Aqua_0173___jpg"></td>
</tr>
</table>
</div>
<div>
<img src="http://www.aquacouture.co.uk/photos/shoots/June_08/20080629Aqua_0118.jpg" alt="">
<table>
<tr>

<td align="right"><p>Do not use this photo:</p></td>
<td><input type="checkbox" name="20080629Aqua_0118___jpg[]" onclick="toggleEnabled(this)" id="20080629Aqua_0118___jpgcheck">
<input type="button" name="" value="Move Up" onclick="zxcMoveUp(this);"/>
</td>
</tr>
<tr>
<td align="right"><p>Order: </p></td>
<td><input id="20080629Aqua_0118___jpgorder" type="text" size="2"></td>
</td>
<tr>

<td align="right"><p>Description:</p></td>
<td colspan="2"><textarea rows="2" cols="25" name="20080629Aqua_0118___jpg[]" id="20080629Aqua_0118___jpgdescription">3</textarea></td>
</tr>
<tr>
<td align="right"><p>Label:</p></td>
<td colspan="2"><input type="text" size="29" name="20080629Aqua_0118___jpg[]" id="20080629Aqua_0118___jpglabel"></td>
</tr>

<tr>
<td align="right"><p>Price:</p></td>
<td><input type="text" size="29" name="20080629Aqua_0118___jpg[]" id="20080629Aqua_0118___jpgprice"><input type="hidden" name="filename[]" value="20080629Aqua_0118___jpg"></td>
</tr>
</table>
</div>
</div>
</body>

</html>

samuurai
08-17-2008, 10:40 PM
Phwoar... nice one, that looks great! I'll start implementing it into my code now :)

Many thanks!!!!! :)

samuurai
08-17-2008, 10:41 PM
then use insertBefore

Never new that method existed.. thanks a lot!

samuurai
08-19-2008, 09:59 PM
I'm going through trying to learn from your code.. I have a couple of questions.

What is this?



/*<![CDATA[*/


And what is the .use property? I couldn't find it on google !



function zxcNotRequired(zxcp){
var zxcdivs=zxcp.getElementsByTagName('DIV');
for (var zxc0=0;zxc0<zxcdivs.length;zxc0++){
var zxcips=zxcdivs[zxc0].getElementsByTagName('INPUT');
zxcdivs[zxc0].use=true;
if (zxcips[0].checked){
zxcdivs[zxc0].use=false;
zxcp.appendChild(zxcdivs[zxc0]);
}
}
zxcReNumber(zxcp);
}



Thanks again for this awesome code... it's slow going learning it, but it's an ingenious and much more scalable appraoch.

samuurai
08-26-2008, 01:40 PM
BUMP - perhaps someone else can explain ? :)

vwphillips
08-26-2008, 04:30 PM
.use is a custom property of the object
but is redundent as the checked condition is used in subsequent code

This removes the redundent code


function zxcNotRequired(zxcp){
var zxcdivs=zxcp.getElementsByTagName('DIV');
for (var zxc0=0;zxc0<zxcdivs.length;zxc0++){
var zxcips=zxcdivs[zxc0].getElementsByTagName('INPUT');
if (zxcips[0].checked){
zxcp.appendChild(zxcdivs[zxc0]);
}
}
zxcReNumber(zxcp);
}



the /*<![CDATA[*/ is due to the doc type
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

for
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
it would be

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

//-->
</script></head>

<body>

</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum