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>

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

2 个答案: