Swap Input Values

Posted on 2011-10-24
Last Modified: 2012-06-21
I have a form with 8 text/inputs - what I wanted to try and do - ideally - is to "grab" the value from one input and "drop" them onto another input - so, the two input values would swap places - is that possible - if so how?  I assume jQuery?
Question by:tbaseflug
    LVL 21

    Expert Comment

    by:Kim Walker
    You'd have to store the value of the first in a temporary variable then reset the value of the first to the value of the second, then set the value of the second to the temporary value.

    var in1 = document.getElementById('input1'), in2 = document.getElementById('input2');
    var temp = in1.value;
    in1.value = in2.value;
    in2.value = temp;

    Open in new window

    LVL 29

    Expert Comment

    Unless the calues are numbers, then you don't need a temp var
    var a = document.getElementById('input1'), // Assume value = 7
        b = document.getElementById('input2'); // Assume value = 4
    a.value = a.value + b.value; // a = 11
    b.value = a.value - b.value; // b = 7 (was 4)
    a.value = a.value - b.value; // a = 4 (was 7)

    Open in new window

    LVL 29

    Expert Comment

    And by "calues", I, of course, meant "values".
    LVL 15

    Accepted Solution

    I assume you have this:
    <input name="text1" id="text1">
    <input name="text2" id="text2">
    <input name="text3" id="text3">

    add class to all of them
    <input name="text1" id="text1" class="dropinput">
    <input name="text2" id="text2" class="dropinput">
    <input name="text3" id="text3" class="dropinput">

    with javascript and  jquery
    var originalvalue
    $('.dropinput').focus(function() {
      originalvalue = this.val();
    $('.dropinput').blur(function() {
      if(originalvalue == this.val()) return;//ignore if same value
      // loop over all the items and set

      var item= $('.dropinput').last()
    if (item.prev('.dropinput')==null | item.prev('.dropinput')==this) return;//exit if same item or
    while (item.prev('.dropinput')==null | item.prev('.dropinput')==this);


    I didn't tested it but this is the general way to do it

    Featured Post

    Why You Should Analyze Threat Actor TTPs

    After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

    Join & Write a Comment

    jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
    Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
    Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
    This video teaches users how to migrate an existing Wordpress website to a new domain.

    745 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now