How to duplicate input to child input with jquery?

Question

I want to copy text from input to its own input. Because I have a number of them waiting.

For example : src1 to dest1 ,src2 to dest2 ...src5 to dest5

I don't want to pair them with IDs so I wrote:

$(document).ready(function() {
  var $src = $('.src'), //source value
    $dst = $src.attr('data-dest'); //destination id from .src data-dest
  $src.on('input', function() {
    $dst.val($src.val()); //text from .src will be here
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Src 1: <input type='text' class='src' data-dest="dest1"> Dest 1: <input type='text' id='dest1' readonly>
<br /> Src 2: <input type='text' class='src' data-dest="dest2"> Dest 2: <input type='text' id='dest2' readonly>

But it's not working as expect. JS here : http://jsfiddle.net/nobuts/vsz7bt5L/5/

Rory McCrossan · Accepted Answer · 2019-08-01 09:17:08Z

2

The main issue is that $dst is a string holding the value in the data attribute, not a jQuery object, hence you cannot call val() on it. To fix this you need to use the $dst value as an id selector in a jQuery object.

The secondary issue is that you're selecting a single data attribute from the first .src element, not the one which was clicked. To fix this you need to move that logic inside the click handler and use the this keyword to refer to the element which raised the input event. Try this:

$(document).ready(function() {
  $('.src').on('input', function() {
    var $src = $(this);
    var dst = $src.data('dest');
    $('#' + dst).val($src.val());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Src 1: <input type="text" class="src" data-dest="dest1"> 
Dest 1: <input type="text" id="dest1" readonly><br />

Src 2: <input type="text" class="src" data-dest="dest2"> 
Dest 2: <input type="text" id="dest2" readonly>

answered Aug 1, 2019 at 9:17

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rory McCrossan Over a year ago

Hi @Wilf I noticed you removed the accepted answer - was there a problem with implementing the above? Anything I can help with?

Wilf Over a year ago

Sorry, I run the snippet and test again with your answer here. It's not working.

Rory McCrossan Over a year ago

Can you elaborate more on what doesn't work? Without seeing your broken code I can't really help you debug it. Could you also check the console for errors and let me know what they are

mialdi98 · Accepted Answer · 2019-08-01 09:33:24Z

1

Simply trigger like this:

HTML:

Src 1: <input type='text' class='src' data-dest="dest1">
Dest 1: <input type='text' id='dest1' readonly>
<br />
Src 2: <input type='text' class='src' data-dest="dest2">
Dest 2: <input type='text' id='dest2' readonly>

JS:

$(document).ready(function() {
  $('.src').on('input', function() {
    $($(this).attr('#' + 'data-dest')).val($(this).val());
  });
});

answered Aug 1, 2019 at 9:33

mialdi98

731 silver badge8 bronze badges

Comments

Negi Rox · Accepted Answer · 2019-08-01 09:22:29Z

0

Hi please bind blur function to source input . I created that functionality

$(document).ready(function() {
  var $src = $('.src');
  $src.on('blur', function() {
   var dest = $(this).attr('data-dest');
    var $dst=$("#"+dest);
    $dst.val($(this).val());
    $dst.attr("data-dest",val);
  });
});

you can see a working fiddle here

answered Aug 1, 2019 at 9:22

Negi Rox

3,9421 gold badge14 silver badges18 bronze badges

Comments

Nidhin Joseph · Accepted Answer · 2019-08-01 09:23:21Z

0

You can alternatively use next(), so no need to hassle around id.

$(document).ready(function() {
  $('.src').on('input', function() {
    let $src = $(this);
    $src.next().val($src.val());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Src 1: <input type="text" class="src" data-dest="dest1"> 
Dest 1: <input type="text" id="dest1" readonly><br /> 
Src 2: <input type="text" class="src" data-dest="dest2"> 
Dest 2: <input type="text" id="dest2" readonly>

answered Aug 1, 2019 at 9:23

Nidhin Joseph

10.3k4 gold badges28 silver badges49 bronze badges

Collectives™ on Stack Overflow

How to duplicate input to child input with jquery?

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related