JQUERY : Copy 1st input to 2nd input (Array Inputs)

Question

I have and two array inputs. I want them to be equal on key up event. The problem is I cannot get each 1st input value to be equal on each 2nd input.

JSFIDDLE (This fiddle only copies the first input)

Jquery I have used. (

Which only works for mgr[1] to gm[1]. but fails to copy mgr[2] to gm[2] or mgr3 to gm3
$(document).ready(function() {
    $("#mgr").keyup(function(){
      $('#gm').val($('#mgr').val());
    }); 
});

I have also tried this jquery. But its copies 1st input value to all 2nd input SEE FIDDLE

$(document).ready(function() {

$('input[name="mgr[]"]').keyup(function(){
   var val = 0;
   $('input[name="mgr[]"]').each(function() {
                val += Number($(this).val());
            });

   $('input[name="gm[]"]').each(function() {
                $(this).val(val);
            });
});

});

What I want

Your jsFiddle seems to be working, what's the problem? The input is put into the correct p element, it's just doesn't look that way b/c p is a block element so they're stacked on top of each other, making it look like only the first p element is receiving the input. — Eric Guan
– Eric Guan, Commented Mar 16, 2016 at 3:30
It only copies the value of mgr[1] to gm[1] . but fails to copy the value of mgr[2] to gm[2] or mgr[3] to gm[3] — shin
– shin, Commented Mar 16, 2016 at 3:33
jsfiddle.net/guanzo/47pZS/3 It's an html formatting issue, your logic is correct. — Eric Guan
– Eric Guan, Commented Mar 16, 2016 at 3:34
what if I have the same ID for each <p> and <input> ? The problem here is Im working with input arrays. — shin
– shin, Commented Mar 16, 2016 at 3:37
ID's should be unique. Otherwise you'll get unintended behavior. — Eric Guan
– Eric Guan, Commented Mar 16, 2016 at 3:40

Eric Guan · Accepted Answer · 2016-03-16 04:10:08Z

1

First and foremost you should stop using the same ID's in html, FOREVER. Your code will never work the way it's supposed to, you're going against convention.

I've managed to correct your code to work in an array like manner, where the 2nd input is found through the 1st input's index.

http://jsfiddle.net/guanzo/YBQKz/8/

$('input[name="mgr[]"]').keyup(function(){
   var index = $(this).index('input[name="mgr[]"]')
   $('input[name="gm[]"]').eq(index).val($(this).val());
});

answered Mar 16, 2016 at 4:10

Eric Guan

16.1k10 gold badges53 silver badges63 bronze badges

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

1 Comment

shin Over a year ago

OMG! this is exactly what I have wanted. I am very sorry if I have the same ID's. Its just that its on LOOP. But will take note your advice.

Harish Kommuri · Accepted Answer · 2016-03-16 04:10:19Z

1

As per your HTML structure this code will help you.

$(document).ready(function() {
  $("input[type=text]").on("input", function() {
    if($(this).index() / 2 != 0 || $(this).index() == 0) {
      $(this).next().val($(this).val());
    }
  });
});

JSFiddle demo

answered Mar 16, 2016 at 4:10

Harish Kommuri

2,8641 gold badge24 silver badges29 bronze badges

Comments

UserEsp · Accepted Answer · 2016-03-16 04:07:29Z

First short explication about the code that you are follow. In Jquery you have selectors for get the elements in the DOM, those selectors can be "." for class or "#", for id attribute.

So in the example the jquery function is saying if you click on a element with "js-key-up" class take the value in id attribute and then search an element with the id atribute with this form '#' + id + '-in-document'.
In your case can be something like this code.

<input class="mgr" id="1">
<input class="mgr" id="2">
<input class="mgr" id="3">

<input  id="gm1">
<input  id="gm2">
<input  id="gm3">

$('.mgr').keyup(function (e) {
    var id = $(this).attr('id');
    $('#gm' + id').html($(this).val());
});

I hope it helps. Good luck!

Collectives™ on Stack Overflow

JQUERY : Copy 1st input to 2nd input (Array Inputs)

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related