dynamic text boxes: changing the rank

[jdubwelch]

I have any number of text boxes, lets say 4 for example.  Named: a, b, c, & d.  Each start with the values 1,2,3, & 4.  I want to make it so when the user changes the rank, it will swap with the other box that had that value. 

 

For example, lets say the user changes box "c" from 3 to 1.  I then want box "a" to automatically change to 3. 

 

Also, I want them to do it as much as they want and still work. 

 

I'm pretty new at javascript, I know php pretty well and would use an array in php but arrays in javascript are quite the same.

 

This is what i have so far, but I don't know if it's in the right direction.  Any help would be great, or any articles or tutorials you know of would be awesome too.  thanks.

 

<script type="text/javascript">
function updateForm (newValue) {
     var newVal = newValue.value;
     alert("the value of the box that was changed is: " + newVal);
}

function currentVal (currentValue) {
var currentVal = currentValue.value;
var currentName = currentValue.name;
alert("the current value of the box is: " + currentName);
}
</script>
<form id="rankem" name="rankem" method="post" action="">
  <p>
    <input name="a" type="text" id="a" size="3"  value="1" onchange="updateForm(this);" />
  </p>
  <p>
    <input name="b" type="text" id="b" size="3" value="2" onchange="updateForm(this);" />
  </p>
  <p>
    <input name="c" type="text" id="c" size="3"  value="3" onchange="updateForm(this);" />
  </p>
  <p>
    <input name="d" type="text" id="d" size="3" value="4" onchange="updateForm(this);" />
  </p>
</form>

 

i need the current value, and the new value... i can get them with my different functions... but i don't know how to get them together at once.

[gurroa]

If you don't need id values.

Or you can use style.zIndex as a temporary storage.

<script type="text/javascript">
function SwapValues(frst, sec) {
  var val = frst.value;
  frst.value = sec.id;
  sec.value = val;
  delete frst; delete sec; delete val;
}
function updateForm (which) {
  if (document.rankem.a != which && document.rankem.a.value == which.value) SwapValues(document.rankem.a, which);
  else
  if (document.rankem.b != which && document.rankem.b.value == which.value) SwapValues(document.rankem.b, which);
  else
  if (document.rankem.c != which && document.rankem.c.value == which.value) SwapValues(document.rankem.c, which);
  else
  if (document.rankem.d != which && document.rankem.d.value == which.value) SwapValues(document.rankem.d, which);

  delete which;
}
</script>
<form id="rankem" name="rankem" method="post" action="">
  <p>
    <input name="a" type="text" id="0" size="3" value="1" onfocus="this.id=this.value" onchange="updateForm(this);" />
  </p>
  <p>
    <input name="b" type="text" id="0" size="3" value="2" onfocus="this.id=this.value" onchange="updateForm(this);" />
  </p>
  <p>
    <input name="c" type="text" id="0" size="3" value="3" onfocus="this.id=this.value" onchange="updateForm(this);" />
  </p>
  <p>
    <input name="d" type="text" id="0" size="3" value="4" onfocus="this.id=this.value" onchange="updateForm(this);" />
  </p>
</form>