how to exchange value between 2 inputs

Question

I have 2 input text and button.. I want to make exchange value between 2 inputs at the same time. here is my code.

 $("button").on('click', function() { if (!($(this).hasClass("clicked"))) { $(this).addClass("clicked"); $(".first").val($(".second").val()); $(".second").val($(".first").val()); } else { $(this).removeClass("clicked"); $(".first").val($(".second").val()); $(".second").val($(".first").val()); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <input class="first" type="text" value> <input class="second" type="text" value> <button type="button">Exchange</button> </div> 

the first input works fine but the second not working.. I want the exchange happen at the same time.

Answer 1

You are overwriting one of the two before reading that other value. So you end up with twice the same value.

The traditional way is to use a temporary variable:

 $("button").on('click', function() { $(this).toggleClass("clicked"); var temp = $(".first").val(); $(".first").val($(".second").val()); $(".second").val(temp); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <input class="first" type="text" value> <input class="second" type="text" value> <button type="button">Exchange</button> </div> 

At the same time note how you can shorten your code with the toggleClass method.

Alternative

Just to provide an alternative, you can do this without an explicit extra variable, using the ES6 destructuring assignment . For that to work, you need to have an assignable property for the input value. Of course, the DOM value property would just be that:

 $("button").on('click', function() { $(this).toggleClass("clicked"); [$(".first").get(0).value, $(".second").get(0).value] = [$(".second").val(), $(".first").val()]; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <input class="first" type="text" value> <input class="second" type="text" value> <button type="button">Exchange</button> </div> 

Answer 2

that because the value was changed . try to save old value on var

 $("button").on('click', function() { var first = $(".first").val(), second = $(".second").val(); if (!($(this).hasClass("clicked"))) { $(this).addClass("clicked"); $(".first").val(second); $(".second").val(first); } else { $(this).removeClass("clicked"); $(".first").val(second); $(".second").val(first); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <input class="first" type="text" value> <input class="second" type="text" value> <button type="button">Exchange</button> </div> 

Answer 3

 $("button").on('click', function() { var firstVal = $(".first").val() var secondVal = $(".second").val() if (!($(this).hasClass("clicked"))) { $(this).addClass("clicked"); $(".first").val(secondVal); $(".second").val(firstVal); } else { $(this).removeClass("clicked"); $(".first").val(secondVal); $(".second").val(firstVal); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <input class="first" type="text" value> <input class="second" type="text" value> <button type="button">Exchange</button> </div> 

You need to store the original values first, when you try to swap them without storing you forget that one of the values is overridden.

Answer 4

Use an intermediate temp variable to swap them.

$("button").on('click', function() {
    if (!($(this).hasClass("clicked"))) {
        $(this).addClass("clicked");
        var temp = $(".first").val();
        $(".first").val($(".second").val());
        $(".second").val(temp);
    } else {
        $(this).removeClass("clicked");
        var temp = $(".first").val();
        $(".first").val($(".second").val());
        $(".second").val(temp);
    }
});

Working DEMO