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 8 of 8
  1. #1
    Regular Coder
    Join Date
    Nov 2007
    Posts
    144
    Thanks
    64
    Thanked 0 Times in 0 Posts

    Moving dynamic form elements around.

    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

  • #2
    Senior Coder shyam's Avatar
    Join Date
    Jul 2005
    Posts
    1,563
    Thanks
    2
    Thanked 163 Times in 160 Posts
    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.
    You never have to change anything you got up in the middle of the night to write. -- Saul Bellow

  • Users who have thanked shyam for this post:

    samuurai (08-17-2008)

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <!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>
    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/

  • Users who have thanked vwphillips for this post:

    samuurai (08-17-2008)

  • #4
    Regular Coder
    Join Date
    Nov 2007
    Posts
    144
    Thanks
    64
    Thanked 0 Times in 0 Posts
    Phwoar... nice one, that looks great! I'll start implementing it into my code now

    Many thanks!!!!!

  • #5
    Regular Coder
    Join Date
    Nov 2007
    Posts
    144
    Thanks
    64
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by shyam View Post
    then use insertBefore
    Never new that method existed.. thanks a lot!

  • #6
    Regular Coder
    Join Date
    Nov 2007
    Posts
    144
    Thanks
    64
    Thanked 0 Times in 0 Posts
    I'm going through trying to learn from your code.. I have a couple of questions.

    What is this?
    Quote Originally Posted by vwphillips View Post
    Code:
    /*<![CDATA[*/
    And what is the .use property? I couldn't find it on google !
    Quote Originally Posted by vwphillips View Post
    Code:
    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.

  • #7
    Regular Coder
    Join Date
    Nov 2007
    Posts
    144
    Thanks
    64
    Thanked 0 Times in 0 Posts
    BUMP - perhaps someone else can explain ?

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    .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

    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
    Code:
    <!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>
    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/

  • Users who have thanked vwphillips for this post:

    samuurai (08-26-2008)


  •  

    Posting Permissions

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