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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Swapping contents of text boxes etc

    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?

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Basic e.g.…

    js:
    Code:
    function swapVals() {
    
    	f1Obj = document.getElementById('f1');
    	f2Obj = document.getElementById('f2');
    
    	txtVar1 = f1Obj.value;
    	txtVar2 = f2Obj.value;
    
    	f1Obj.value = txtVar2;
    	f2Obj.value = txtVar1;
    
    }
    markup:
    Code:
    <input type="text" id="f1" /><br />
    <input type="text" id="f2" /><br />
    <input type="button" value="swap" onclick="doIt()" />
    Last edited by Bill Posters; 09-26-2005 at 04:02 PM.

  • #3
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by Oli-G; 09-26-2005 at 04:44 PM.

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote 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:
    Code:
    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:
    Code:
    <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()" />
    Last edited by Bill Posters; 09-26-2005 at 05:06 PM.

  • #5
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    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.


  •  

    Posting Permissions

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