...

View Full Version : Swap form input fields contents?



sandra_sz
02-27-2007, 02:29 PM
Hi there.
I am new to Javascript and I need some serious help.
I have one form on a page with 'n' text input fields grouped in blocks of the same input fields. Something like this:

<div id="block1">
name_1
lastname_1
address_1
phone_1
...
</div>
<div id="block2">
name_2
lastname_2
address_2
phone_2
...
</div>
...

The number of fields for each block varies because the page is constructed by a server function.

What I want to implement is move up and a move down buttons on each block to move what the user has entered in say, block 4, to block 3 (and move the block 3 contents to block 4). And the contrary too.

Can you help, please? Thanks!

phill_ridout
02-27-2007, 06:31 PM
Could you provide some more info?

where are the input fields? some sample code would help

sandra_sz
02-27-2007, 06:50 PM
Thanks for replying phill... here it is:


<ol>
<div id="formlines">
<li id="line_1">
<p><input id="line_1_title" name="line[1][title]" size="70" type="text" value="" /></p>
<p><input id="line_1_uri" name="line[1][uri]" size="70" type="text" /></p>
<p><input id="line_1_description" name="line[1][description]" size="70" type="text" value="" /></p>
</li>
<li id="line_2">
<p><input id="line_2_title" name="line[2][title]" size="70" type="text" value="" /></p>
<p><input id="line_2_uri" name="line[2][uri]" size="70" type="text" /></p>
<p><input id="line_2_description" name="line[2][description]" size="70" type="text" value="" /></p>
</li>
<li id="line_3">
<p><input id="line_3_title" name="line[3][title]" size="70" type="text" value="" /></p>
<p><input id="line_3_uri" name="line[3][uri]" size="70" type="text" /></p>
<p><input id="line_3_description" name="line[3][description]" size="70" type="text" value="" /></p>
</li>
<li id="line_4">
<p><input id="line_4_title" name="line[4][title]" size="70" type="text" value="" /></p>
<p><input id="line_4_uri" name="line[4][uri]" size="70" type="text" /></p>
<p><input id="line_4_description" name="line[4][description]" size="70" type="text" value="" /></p>
</li>
</div>
</ol>

vwphillips
02-27-2007, 07:03 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// Copy Fields (27-February-2007)
// by Vic Phillips http://www.vicsjavascripts.org.uk


function zxcCopy(zxcobj,zxcdir,zxccls){
var zxcp=zxcobj;
while(zxcp.parentNode){
if (zxcp.className){
if (zxcp.className==zxccls){
break;
}
}
zxcp=zxcp.parentNode;
}
var zxcary=window['zxc'+zxccls];
for (var zxc0=0;zxc0<zxcary.length;zxc0++){
if (zxcary[zxc0]==zxcp&&zxcary[zxc0+zxcdir]){
var zxcips0=zxcary[zxc0].getElementsByTagName('INPUT');
var zxcips1=zxcary[zxc0+zxcdir].getElementsByTagName('INPUT');
for (var zxc0a=0;zxc0a<zxcips0.length;zxc0a++){
zxcips1[zxc0a].value=zxcips0[zxc0a].value;
}
}
}
}

function zxcInitCopy(zxccls){
window['zxc'+zxccls]=[];
var zxcdivs=document.getElementsByTagName('BODY')[0].getElementsByTagName('DIV');
for (var zxc0=0;zxc0<zxcdivs.length;zxc0++){
if (zxcdivs[zxc0].className){
if (zxcdivs[zxc0].className==zxccls){
window['zxc'+zxccls].push(zxcdivs[zxc0]);
}
}
}
}

//-->
</script>

</head>

<body onload="zxcInitCopy('block');" >
<div class="block" >
<input ><br>
<input ><br>
<input ><br>
<input ><br>
<input type="button" value="Copy Up" onclick="zxcCopy(this,-1,'block');" ><br>
<input type="button" value="Copy Down" onclick="zxcCopy(this,1,'block');" ><br>
</div>
<br>
<div class="block" >
<input ><br>
<input ><br>
<input ><br>
<input ><br>
<input type="button" value="Copy Up" onclick="zxcCopy(this,-1,'block');" ><br>
<input type="button" value="Copy Down" onclick="zxcCopy(this,1,'block');" ><br>
</div>
<br>
<div class="block" >
<input ><br>
<input ><br>
<input ><br>
<input ><br>
<input type="button" value="Copy Up" onclick="zxcCopy(this,-1,'block');" ><br>
<input type="button" value="Copy Down" onclick="zxcCopy(this,1,'block');" ><br>
</div>
</body>

</html>

phill_ridout
02-27-2007, 07:49 PM
Got there before me lol

vwphillips
02-28-2007, 12:26 AM
Got there before me lol

does not stop you posting your solution

sandra_sz
02-28-2007, 01:11 PM
Wow, thanks vwphillips, that is great. The only thing missing is that when copying up or down the target should be swapped with the origin.
For example when copying up from 4 to 3, 3 "becomes" 4 but 4 should become 3 also.
Thanks very much



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum