Swap Input Values

Posted on 2011-10-24
Medium Priority
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
  • 2
LVL 22

Expert Comment

by:Kim Walker
ID: 37021223
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

ID: 37021558
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

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

Accepted Solution

Eyal earned 2000 total points
ID: 37022525
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses
Course of the Month9 days, 20 hours left to enroll

571 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