Swapping contents of text boxes etc

[Oli-G]

Hi all

Not quite sure how to go about this.

I have a page set out with two text boxes and a button, and need to have the contents of the boxes swapped when the button is clicked.

Any pointers?

[Bill Posters]

Basic e.g.…

js:

function swapVals() {

	f1Obj = document.getElementById('f1');
	f2Obj = document.getElementById('f2');

	txtVar1 = f1Obj.value;
	txtVar2 = f2Obj.value;

	f1Obj.value = txtVar2;
	f2Obj.value = txtVar1;

}

markup:

<input type="text" id="f1" /><br />
<input type="text" id="f2" /><br />
<input type="button" value="swap" onclick="doIt()" />

[Oli-G]

Thanks mate, I initially envisaged it would be a bit leaner, ie just call on the text property of box a to equal that of box b, and vice versa.

Edit - all good!

Thanks again

[Bill Posters]

Originally Posted by Oli-G

Thanks mate, I initially envisaged it would be a bit leaner, ie just call on the text property of box a to equal that of box b, and vice versa.

That wouldn't have worked because by time you come to make the value of field B equal that of field A, the value of field A has already been replaced with the value from field B, as per the first statement.
Consequently, you need to temporarily store both values before changing either.
You follow?

Because I need to then somehow have a second button that, if numbers are entered, swaps the values in the box from smalles to largest, top box to bottom, and it might be a bit over me with that method!

Is there a leaner way, or could that be used for both?

Thanks again

Here's basically what the following function does…

1. Identify the relevant text field and creates an array of their identities according to the order in which they appear in the markup
   
2. Creates an array for the values and matches each value to a position in the array.
   
3. Sorts the values array alpha-numerically (done using the sort() method).
   
4. Loops through the target text fields from top to bottom (first to last) putting in the values as they appear in the newly sorted values array. i.e placing the first alpha-numerical value into the first text field, the second alpha-numerical value into the second field, etc…

another basic e.g.

js:

function sortVals() {

	// 1
	fieldObjs = document.getElementById('thesefields').getElementsByTagName('input');

	// 2
	targetFieldsArray = new Array();

	for (i=0; i<fieldObjs.length; i++) {
		targetFieldsArray[i] = fieldObjs[i].value;
	}

	// 3
	targetFieldsArray.sort();

	// 4
	for (i=0; i<fieldObjs.length; i++) {
		fieldObjs[i].value = targetFieldsArray[i];
	}

}

markup:

<span id="thesefields">
	<input type="text" value="8" /><br />
	<input type="text" value="zebra" /><br />
	<input type="text" value="3" /><br />
	<input type="text" value="alpha" />
</span>
	<input type="button" value="sort" onclick="sortVals()" />

[Oli-G]

Wow you certainly got busy.... thanks a heap for the effort.

What you said makes sense, I wasn't exactly sure how the Javascript went about processing the code, ie if it collected all the data first then followed the instructions, etc.

Thanks for the second example, i'll work through that now.

Cheers

[Bill Posters]

No worries.

I've tweaked the last example a little to make it a little more straight forward.
I've isolated the target text fields within their own span element so addressing them as a group in the js can be done more simply.