Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Swap form input fields contents?

    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!
    Last edited by sandra_sz; 02-27-2007 at 03:00 PM.

  • #2
    Regular Coder
    Join Date
    Mar 2006
    Posts
    187
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Could you provide some more info?

    where are the input fields? some sample code would help

  • #3
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for replying phill... here it is:
    Code:
    <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>

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,521
    Thanks
    3
    Thanked 507 Times in 494 Posts
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    Regular Coder
    Join Date
    Mar 2006
    Posts
    187
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Got there before me lol

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,521
    Thanks
    3
    Thanked 507 Times in 494 Posts
    Got there before me lol
    does not stop you posting your solution
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •