Question

So I have one input field that needs to pop up in another place when the user changes a tab and presses a button,
but I figured tossing the div around would be too much hassle,
so is it instead possible to make two input fields but have them display the same input entered by the user?

Or is there an easier way?

Answer 1

Try this. Of course, make sure it is on DOM .ready().

$('#input1').blur(function() {
    $('#input2').val( this.value );
});

• Use .blur() to run the code when the user leaves the input1.
• Use .val() to set the value of input2 to the this.value of input1.

If you need to work the reverse direction as well, just assign another handler, reversing the inputs.

$('#input2').blur(function() {
    $('#input1').val( this.value );
});

---

EDIT: To deal with multiple inputs, give them all the same class, then use paired IDs.

Like this:

Example: http://jsfiddle.net/m3q4V/

<!-- In tab 1 -->
<input type="text" class="someClass" id="address_1" />
<input type="text" class="someClass" id="city_1" />
<input type="text" class="someClass" id="zip_1" />

<!-- In tab 2 -->
<input type="text" class="someClass" id="address_2" />
<input type="text" class="someClass" id="city_2" />
<input type="text" class="someClass" id="zip_2" />

js:

$('.someClass').blur(function() {
    var parts = this.id.split('_'); // separate into parts, like 'address' and '2'
    var num = (parts[1] == 2) ? 1 : 2;  // invert the number between 1 and 2
      // build the selector with 'address' + '_' + '1'
    $('#' + parts[0] + '_' + num).val( this.value );
});