如何使用jQuery將輸入值插入更多填充的字段？

Question

我有輸入，我想使用jQuery將值傳遞到填充字段。 因此，根據主要輸入，新填充的輸入將具有不同的值。

到目前為止，我已經嘗試用下面的注釋jquery嘗試了，但是它不起作用。 我不熟悉jQuery和即時消息尋求幫助。

 $(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>

Answer 1

您正在復制html（包含文本框），這就是為什么在第一次添加后，會出現多個具有相同ID的文本框。 如果要添加多個文本框，則必須動態創建它們

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();
    });

}); 

我在這里創建了一個小提琴https://jsfiddle.net/xpvt214o/147834/

Answer 2

那里有兩個問題：

第一：您不應在HTML中創建兩個相同的id元素。 同樣，它不會引起任何錯誤，但是當您使用id選擇器選擇它們時，它只會找到一個元素。 在您的代碼中，您使用了copy var html = $(".copy").html();$(".hide").after(html); 創建一個新元素。同時，您在其中創建一個相同的id元素。

第二：您在元素創建之前傳遞了值，因此之后創建的元素將無法獲取值。 那里的代碼我更改了，希望您接受。

$(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>