Swap field text

**_tina_** · 07-25-2009, 08:24 PM

Hi,

I have a form with x amounts of textfields, one per row. Beside the fields is a button, up/down.

Code:

textfield1 | up/down
textfield2 | up/down
textfield3 | up/down

I want, if the user clicks up, the value in the value of the current rows textfield will be swapped with the value of the textfield above it.
So, if the user clicks the "up" link on the textfield2 row, textfield2's value will be swapped with the value of textfield1. If they click the down link on textfield2, textfield2's value will be swapped with textfield3's value.

I have:

Code:

function swap(a,b)
{
    var field_a = document.forms[0].a.value;
    var field_b = document.forms[0].b.value;
    document.forms[0].a.value = field_b;
    document.forms[0].b.value = field_a;
}

The only problem is, each form row is created dynamically and in a loop and I don't know ahead of time how many fields there are.

Do you know how I can do this in JavaScript?
Thanks in advance

**rainarts** · 07-27-2009, 07:00 AM

You could try this trick:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Window-target" content="_top">
<title>Free Live Help!</title>
<style type="text/css">
<!--
form {
   background-color : #eee;
   border : 1px solid #aaa;
   width : 70%;
   padding : .500em;
   margin : 0 auto; }
table {
  /* border-collapse : collapse; */
   width : auto;
   margin : 0;
   padding : 0;
   border : none;
   color : #405060; }

td {
   color : #ccc;
   text-align : center;
   width : auto;
   background-color : #f0f0f0;
   border : 1px solid #ddd;
   padding : .300em;
 }
-->
</style>
<script type="text/javascript">
<!--
var simulate = ( function() {
      var node = (( document.getElementById ) ? document.getElementsByTagName( "input" ) : document.all.tags( "input" ));
      var index = this.id.match(/\d+/)[ 0 ];
      var num = (( this.id.indexOf( "bD" + index ) !== -1 ) ? (( index * 1 ) + 1 ) : (( index * 1 ) - 1 )); 
      node[ "tf" + num ].focus();
      node[ "tf" + num ].value = node[ "tf" +  index ].value;
      node[ "tf" +  index ].value = "";    
      return false;
   } );

var dynamic = ( function( form ) {
var ie = ( !!document.all );
var modern = ( document.getElementById );
var form = null || (( ie && !!!modern ) ? document.all[ form ] : (( !!modern ) ? document.getElementById( form ) : document.forms[ form ] ));
var isLen = 5;
var count = 1;
   if ( document.createElement ) {
   var addRow = ( function( row, text, elem ) {
   var xRow = row.insertCell( -1 );
      if ( arguments.length > 2 ) {
      xRow.appendChild( elem )
      return;
      } xRow.appendChild( document.createTextNode( text ));
   } ); 
   var addElement = ( function( element ) {
      var element = document.createElement( element );
      return (( element ) ? element : 0 );
   } );
   var table = addElement( "table" );
   var tHead = table.createTHead();
   var tRow = tHead.insertRow( -1 );
   var tLabel = [ "#", "Field", "Up", "Down" ];
   var tLen = tLabel.length;
      for ( x = 0; x < tLen; x++ ) {
         addRow( tRow, tLabel[ x ] );
      } delete x;
   var tBody = addElement( "tbody" );
   table.appendChild( tBody );
      for ( x = isLen; x > 0; x-- ) {
      tRow = tBody.insertRow( -1 );
         for ( i = 0; i < tLen; i++ ) {
         var labels = addElement( "label" );
         labels.appendChild( document.createTextNode( count ));
         var textField = addElement( "input" );
         textField.type = "text";
         textField.size = 15;
         textField.id = ( "tf" + count );
         textField.name = ( "tf" + count );
         var bUP = addElement( "button" );
         bUP.id = ( "bU" + count );
         bUP.name = ( "bU" + count );
         var bDOWN = addElement( "button" );
         bDOWN.id = ( "bD" + count );
         bDOWN.name = ( "bD" + count );
        bUP.innerHTML = "UP &uarr;";
         bDOWN.innerHTML = "DOWN &darr;";
         bUP.onclick = simulate;
         bDOWN.onclick = simulate;
         var tLabel = [ labels, textField, bUP, bDOWN ];
         addRow( tRow, null, tLabel[ i ] );         
         } count++;
      } delete x; delete i;
    form.appendChild( table );
   return;
   } alert( "Please update your browser with the latest patch", "unsupported feature" );
} );
onload = function() {
dynamic( "frm" );
}
// -->
</script>
</head>
<body>
<div id="main">
<form id="frm" name="frm" action="#" onsubmit="return false;"></form>
</div>
</body>
</html>

**vwphillips** · 07-27-2009, 12:00 PM

or

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

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

function InitUpDown(ipcls,ucls,dcls){
 var ips=zxcByClassName(ipcls),ups=zxcByClassName(ucls),ds=zxcByClassName(dcls)
 for (var z0=0;z0<ips.length;z0++){
  if (ups[z0]){
   ups[z0].updown=[ips[z0],ips[z0-1]]
   ups[z0].onclick=function(){ Swap(this.updown); }
  }
  if (ds[z0]){
   ds[z0].updown=[ips[z0+1],ips[z0]]
   ds[z0].onclick=function(){ Swap(this.updown);  }
  }
 }
}

function Swap(ips){
 if (ips[0]&&ips[1]){
  var save=ips[0].value;
  ips[0].value=ips[1].value;
  ips[1].value=save;
 }
}


function zxcByClassName(nme,el,tag){
 if (typeof(el)=='string') el=document.getElementById(el);
 el=el||document;
 for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
  if(reg.test(els[z0].className)) ary.push(els[z0]);
 }
 return ary;
}



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

<body onload="InitUpDown('input','up','down');">
<table border="1">
  <tr>
    <td><input class="input" value="22" ></td>
    <td><input class="up" type="button" name="" value="Up"></td>
    <td><input class="down" type="button" name="" value="Down"></td>
  </tr>
  <tr>
    <td><input class="input" value="23"></td>
    <td><input class="up" type="button" name="" value="Up"></td>
    <td><input class="down" type="button" name="" value="Down"></td>
  </tr>
  <tr>
    <td><input class="input" value="24"></td>
    <td><input class="up" type="button" name="" value="Up"></td>
    <td><input class="down" type="button" name="" value="Down"></td>
  </tr>
</table>
</body>

</html>

Thread: Swap field text

Thread Tools

Search Thread

Swap field text

Bookmarks

Bookmarks

Posting Permissions