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 14 of 14
  1. #1
    New Coder
    Join Date
    Jan 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool Simple Swap Numbers Function

    Hello,

    I need help on a simple function. Im not great with these so i hope someone has some. Ideas. You can see the form below and basically the 10 textboxes load with the value 1 through 10 and at no time should and textbox contain the same number as another textbox i.e no 2 textboxes should have the number 3 and so on. If somebody clicks on textbox number 4 for example and changes it to 8 then it vialates the "no 2 textboxes should have the same number rule" and so the onChange function should change textbox 8 to number 4.

    So basically its like a wishlist and if someone wants to change the order of one item it would automatically update the other box to maintain the order. After someone is finished updating the textboxes they would submit the wishlist and it would re-order the items for display but i can do this part myself, im just very stumped on how to do the function.

    So if anyone has an ideas or has spotted a similar code i could change to suit i would appreciate your help very much. I have trounced the internet for hours for this type of code but its very hard to find suitable keywords as this is sort of unusual

    Cheers and have a Good Day!!!!!
    Paul

    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>

    <body>
    <form name="form1" method="post" action="">
    <p>&nbsp;</p>
    <p>
    <input name="1" type="text" id="1" value="1" onChange="numbers()">
    </p>
    <p>
    <input name="2" type="text" id="2" value="2" onChange="numbers()">
    </p>
    <p>
    <input name="3" type="text" id="3" value="3" onChange="numbers()">
    </p>
    <p>
    <input name="4" type="text" id="4" value="4" onChange="numbers()">
    </p>
    <p>
    <input name="5" type="text" id="5" value="5" onChange="numbers()">
    </p>
    <p>
    <input name="6" type="text" id="6" value="6" onChange="numbers()">
    </p>
    <p>
    <input name="7" type="text" id="7" value="7" onChange="numbers()">
    </p>
    <p>
    <input name="8" type="text" id="8" value="8" onChange="numbers()">
    </p>
    <p>
    <input name="9" type="text" id="9" value="9" onChange="numbers()">
    </p>
    <p>
    <input name="10" type="text" id="10" value="10" onChange="numbers()">
    </p>
    </form>

    <SCRIPT language="JavaScript1.2">
    function numbers()
    {

    }

    </SCRIPT>
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How about comparing the value property to the id property?

    I played with it for a second... onChange="numbers(this)"
    Code:
    function numbers(obj)
    {
    	var other, id = obj.id, val = obj.value;
    	if(val != id)
    	{
    		other = document.getElementById(val);
    		if(!other)
    			return obj.value = id;
    		other.value = id;
    		other.id = id;
    		obj.id = val;
    	}
    }
    Last edited by codegoboom; 02-02-2005 at 03:09 PM. Reason: spot the bug...
    *this message will self destruct in n-seconds*

  • #3
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No bugs?

    FYI, you can't assign name/id as a number (well you can, but it's against the rules, so it causes bugginess)...

    Code:
    <input type="text" id="i1" value="1" onchange="numbers(this)">
    <!-- etc... -->
    
    function numbers(obj)
    {
    	var other, id = obj.id, n = id.substr(1), val = "i" + obj.value;
    	if(val != id)
    	{
    		other = document.getElementById(val);
    		if(!other)
    			return obj.value = n;
    		other.value = n;
    		other.id = id;
    		obj.id = val;
    	}
    }
    spot the bug...
    Last edited by codegoboom; 02-02-2005 at 06:15 PM. Reason: potentially...
    *this message will self destruct in n-seconds*

  • #4
    New Coder
    Join Date
    Jan 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thank You

    All i can say is your a genius. Short, Sweet and simple. Thanks very much for your help

  • #5
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Not a problem.
    Keep in mind that unrelated element id's should not contain an "i" prefix, because that could mess up the simple validation if one entered say: "x", while an id was "ix"...
    *this message will self destruct in n-seconds*

  • #6
    New Coder
    Join Date
    Jan 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Following Up

    Hello,

    codegoboom gave me some help in creating a javascript program that swaps numbers in text fields when someone changes a number to ensure that no two numbers are the same. Its basically a wishlist and when i change the number for GTA Vice City from my 4th favourite to my 1st favourite it would also change the game i had as my 1st favourite to my 4th favourite.

    No fair play to codegoboom as he got it spot on but i was experimenting with a slightly different variation but i cant get my head around the code. Instead of doing a swap function as codegoboom did above i want someone to be able to move their favourite game from 15th to 4th and instead of doing a swap it will move everything above 4th up 1 number instead of swapping 15 and 4. So basically if i had 15 dvds on top of each other i would take the 15th dvd from the bottom of the spindle and make a space for it 4 from the top.

    I hope you understand what im trying to do and if not please email me and let me know and ill try and explain clearer.

    Im not very good at javascript but im learning bit by bit, although codegobooms code works perfect i dont understand it so i cant alter it myself, even if someone could give me some hints or pointers that would be great, i dont mind having a go myself if i knew how to pass variables from a textbox through an onClick function to a javascript function. So if you know how to do this let me know and ill try to work a code myself.


    Thanks
    Paul

  • #7
    New Coder
    Join Date
    Jan 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hello, Ill try and explain this a bit better with images

    Hello, Ill try and explain this a bit better with images as im not getting a response. I have a wishlist see example below:



    When someone changes the priority text field from one number to another then with the code above provided by codegoboom it will swap one number with another. see example below:



    Now i really appreciated codegoboom's code which allowed me to do this, but now i want to experiment with something similar except instead of doing a swap i want to move a game from its original position to a new position. Ill include 2 examples below:



    In the example above i wanted to move game number 7 to number 2. To allow this to happen everything from number 2 - 6 must move down 1 and everything from 8 on has to move up 1 place.

    If someone could give me any hints or ideas, i dont understand codegobooms code so even if you could explain hes code i might be able to have a go myself. Any little bit of help would be great

    Cheers
    Paul

  • #8
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts
    A table, right?

    How would shifting input values change the meaning of statically numbered|labeled rows?
    Last edited by codegoboom; 03-03-2005 at 12:51 AM.
    *this message will self destruct in n-seconds*

  • #9
    New Coder
    Join Date
    Jan 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hello Codegoboom

    Nice to hear from you again, Basically that table is generated from a database. When i change the values in the input boxes and click on the Update Q button above or below the table it runs an update query and reloads the table which will re-arrange the records based on what was in the input boxes.

    I just need to know how to re-arrange the values in the input box. Even a simple example of how an onclick event would send the value of the input box to the function, and how to extract the values of the other input boxes after the onclick event happens would be a big help. That way i can maybe work it out myself, but im not that great at javascript and although your origional code is brilliant i dont understand how it works.

    I hope you can help
    Thanks A Million Paul

  • #10
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, I can't imagine how inputs are bound to related cells, or how one would keep track of reordering (unless an update occured for each action), but as far as the shifting part goes, there's more than one way, which would also depend on specific document structure.
    *this message will self destruct in n-seconds*

  • #11
    New Coder
    Join Date
    Jan 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CodeGoBoom

    The input boxes are displayed in a repeat region taking from the database. Here is the line of html for the input boxes that i extracted from the code. the i variable increase ++ everytime it loops through and displays another record.

    Code:
    <form name="form1" method="post" action="yourqChange.asp">
    <input name="i<%=i+1%>" type="text" id="i<%=i+1%>" onChange="numbers(this)" value="<%=i+1%>" size="3" maxlength="2">
    <input type="hidden" name="z<%=i+1%>" id="z<%=i+1%>" value="<%=(rsWishlist.Fields.Item("WishID").Value)%>">
    </form>


    Then when someone clicks on the Update Q Button i use request.form to get the values from each of the input boxes and update any changes to the database. When the database is loaded the new changes re-arrange the positioning of the records:

    Code:
    var i = new Array();
    var z = new Array();
    var y=1;
    for (var x=0; x < totalGames; x++)
    {
    
    i[y] = Request.Form("i"+y);
    var pref = i[y];
    z[y] = Request.Form("z"+y);
    var wish = z[y];
    
    var adoConnection = Server.CreateObject("ADODB.Connection");
    adoConnection.Open("provider=Microsoft.Jet.OLEDB.4.0; data source=c:\\xxxx\\xxxxxxxxxx\\xxxxx\\myDatabase.mdb");
    var SQL = "Update tblWishList SET Preference=" + pref + " WHERE WishID= " + wish + " AND Username= '"+String(Session("MM_Username"))+"' ";
    
    adoConnection.Execute(SQL);
    adoConnection.Close();
    adoConnection = null;
    y++
    }
    
    Response.Redirect("original.asp");
    Bear in mind im coding in asp and serverside javascript.


    If you want to see a live example codegoboom please goto this url:

    http://www.athlonemovies.com/arman/originalLogin.asp

    And use the following temporary username and password:
    morny@athlonemovies.com
    password: password

    And when you login change around the numbers in the input boxes and click on the update Q button and youll see them re-arranged.


    Thanks for sticking with me codegoboom, i really appreciate you taking the time to reply. Im probably not explaining very well.

    Thanks Again
    Paul

  • #12
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Actually, I was just sticking a toe into murky waters...

    I understand how the swap-processing works, but still don't see how this new "experiment" is expected to fly.

    Perhaps you should search around about 'scripting with collections', as this seems to be what you're asking, in general.
    Last edited by codegoboom; 03-03-2005 at 06:19 AM.
    *this message will self destruct in n-seconds*

  • #13
    New Coder
    Join Date
    Jan 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy

    Hi Again, i tried searching under them terms you gave me but i couldnt find anything suitable. If someone can explain how to do the following simple things i should be able to figure it out and ill post the results when i do.

    Firstly i have 5 input boxes as follows:

    <input name="i1" type="text" id="i1" onChange="numbers(this)">
    <input name="i2" type="text" id="i2" onChange="numbers(this)">
    <input name="i3" type="text" id="i3" onChange="numbers(this)">
    <input name="i4" type="text" id="i4" onChange="numbers(this)">
    <input name="i5" type="text" id="i5" onChange="numbers(this)">

    1) How do i extract the input id and the input value from the form into a function and assign them to variables after someone activates the onChange function for the applicable input box.

    2) How do extract the input id's and the input values of the other 4 input boxes and assign them to variables even though there would have been no onChange activated for them 4 input boxes?

    3) How do i change the value of the input boxes from inside a function.

    With them 3 simple answers i should be able to write a function to do what i need and i can then post it back here to show you.

    Please can anyone help as this is driving me bonkers

  • #14
    New Coder
    Join Date
    Jan 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok ive nearly got it figured out now. Please go to this url:

    http://www.athlonemovies.com/arman/originalLogin.asp

    and use the following username and password:
    u: morny@athlonemovies.com
    p: password

    And this is the function that makes it work

    Code:
    function numbers(obj)
    {
     idPrefix = "i";
     
     newPosition = obj.value;
     initialPosition = obj.id.substr(idPrefix.length);
    
    if(newPosition < initialPosition)
     
    for(i = newPosition;i<initialPosition;i++){
                var tmpInput = document.getElementById(idPrefix + i);
          tmpInput.value = parseInt(tmpInput.value)+1;
     }// increments values from the lower preference to the higher
    else
    for(i = parseInt(initialPosition)+1;i<=newPosition;i++){
                var tmpInput = document.getElementById(idPrefix + i);
          tmpInput.value = parseInt(tmpInput.value)-1;
    
    }// decrements values from the lower preference to the higher
    
    
    
    }
    Now the only problem im left facing is that it will only work once. Anotherwords if you change game 1 to game 2 the function will work but if you try and change them back you end up with game 1 having the same value of game 2. Is there anyway of altering the code to make the code work over and over without having to reload the page over and over?


  •  

    Posting Permissions

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