How to insert input values to more populated fields with jQuery?

Question

I have inputs and I want to pass the values to populated fields using jQuery. So, the new populated inputs will have different values, based on main input.

I have tried so far with below commented jquery but its not working. I'm not familiar with jQuery and Im looking for help.

 $(document).ready(function () {
       $(".add-more").click(function () {
               //this inputs values
               var mat = $('#mat').val();
                var one= $('#qty').val();
                //to this inputs
               $('#admore').val(mat);
                $('#adqty').val(one);

               var html = $(".copy").html();
               $(".hide").after(html);

           });


        $("body").on("click", ".remove", function () {
            $(this).parents(".control-group").remove();
        });

    }); 

<div class="panel-body">
    <form action="#">
        <div class="input-group control-group after-add-more issue-from">
             <input id="mat" type="text" name="addmore[]" class="form-control barcode_m" placeholder="Search or scan barcode..">
             <input id="qty" type="text" name="qty[]" class="form-control barcode_qty_select" placeholder="QTY">

              <div class="input-group-btn"> 
                   <button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i></button>
              </div>
         </div>
   </form>
    <div class="divider">
    </div>

     <!-- Copy Fields -->
    <div class="copy hide total_sales">
         <div class="control-group input-group drop_result" style="margin-top:10px">
         <input id="admore" type="text" name="addmore[]" class="form-control barcode_m" placeholder="Search or scan barcode..">
         <input id="adqty" type="text" name="qty[]" class="form-control barcode_qty" placeholder="QTY">
             <div  class="form-control barcode_price"></div>
                 <div class="input-group-btn"> 
                      <button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i></button>
                  </div>
             </div>
      </div>                              
  </div>

It's not clear from your problem statement that to which field you want to add values, can you write that specifically? — Mesar ali
– Mesar ali, Commented Apr 18, 2018 at 1:07
input id="mat" and id="qty" values, to id="admore", id="adqty" — MaxPower
– MaxPower, Commented Apr 18, 2018 at 1:12
It's already in the script element, but I have pulled out just to ask here :) — MaxPower
– MaxPower, Commented Apr 18, 2018 at 1:37

Mesar ali · Accepted Answer · 2018-04-18 01:52:32Z

2

You are copying html(which contains textboxes), that's why after first add, there become multiple textboxes with same id. if you are looking to add multiple textboxes, you have to create them dynamically as

var count=1;
$(document).ready(function () {
   $(".add-more").click(function () {
           //this inputs values
           var mat = $('#mat').val();
            var one= $('#qty').val();
            //to this inputs
           if (count==1){
           $('#admore').val(mat);
            $('#adqty').val(one);
            }
            else{
            $('#admore'+count).val(mat);
            $('#adqty'+count).val(one);
            }
                            count++;
           //var html = $(".copy").html();
           var dyn = '<div class="control-group input-group drop_result" style="margin-top:10px">'
     dyn += '<input id="admore'+count+'" type="text" name="addmore[]" class="form-control barcode_m" placeholder="Search or scan barcode..">';
     dyn += '<input id="adqty'+count+'" type="text" name="qty[]" class="form-control barcode_qty" placeholder="QTY">';

  dyn += '</div>';
           $(".hide").after(dyn);

       });


    $("body").on("click", ".remove", function () {
        $(this).parents(".control-group").remove();
    });

});

i created a fiddle here https://jsfiddle.net/xpvt214o/147834/

answered Apr 18, 2018 at 1:52

Mesar ali

1,8982 gold badges18 silver badges20 bronze badges

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

1 Comment

MaxPower Over a year ago

All day Im looking for this. Thank you very much! @crack_iT

ChadQi · Accepted Answer · 2018-04-18 02:02:41Z

You have two problems there:

First: you shouldn't create two same id element in HTML. Also it will not cause any errors, but when you use id selector to selet them, it will only find one element. In your code ,you used copy var html = $(".copy").html();$(".hide").after(html); to create a new element.At the same time,you create a same id element in it.

Second: you were pass value before element created, so the element created after will not get the value. there the code I changed, hope you accept.

$(document).ready(function () {
  $(".add-more").click(function () {
    //this inputs values
    var mat = $('#mat').val();
    var one= $('#qty').val();

    var html = $(".copy").html();
    $(".hide").after(html);

    //to this inputs
    $('.admore').val(mat);
    $('.adqty').val(one);
  });
  $("body").on("click", ".remove", function () {
    $(this).parents(".control-group").remove();
  });
});
<div class="panel-body">
<form action="#">
    <div class="input-group control-group after-add-more issue-from">
        <input id="mat" type="text" name="addmore[]" class="form-control barcode_m" placeholder="Search or scan barcode..">
        <input id="qty" type="text" name="qty[]" class="form-control barcode_qty_select" placeholder="QTY">

        <div class="input-group-btn">
            <button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i></button>
        </div>
    </div>
</form>
<div class="divider">
</div>

<!-- Copy Fields -->
<div class="copy hide total_sales">
    <div class="control-group input-group drop_result" style="margin-top:10px">
        <input  type="text" name="addmore[]" class="admore form-control barcode_m" placeholder="Search or scan barcode..">
        <input  type="text" name="qty[]" class="adqty form-control barcode_qty" placeholder="QTY">
        <div  class="form-control barcode_price"></div>
        <div class="input-group-btn">
            <button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i></button>
        </div>
    </div>
</div>

Collectives™ on Stack Overflow

How to insert input values to more populated fields with jQuery?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related