时间戳

首页 > 解决方案 > 如何从具有相同名称的多个输入中获取值，其中输入字段是使用 jQuery 动态创建的？

jquery - 如何从具有相同名称的多个输入中获取值，其中输入字段是使用 jQuery 动态创建的？

问题描述

我想通过单击按钮动态创建金额、数量、小计字段。但问题是，当我有多行具有相同名称的动态输入字段时，由于 id 名称相同，我无法使用 jQuery 获取值。我想获取数量和数量输入字段值的值以每次计算小计。如何获取动态字段值来计算小计。

这是代码。

@extends('layout.master')
@section('css')
    @endsection
@section('content')
       
          <div id="saveInvoice">
            <table id="dynamicAddRemove">
              <tr>
                <th class="wd-15p fontColor">Invoice Entry</th>
                <th class="wd-15p fontColor">Quantity</th>
                <th class="wd-15p fontColor">Amount</th>
                <th class="wd-15p fontColor">Subtotal</th>
                <th class="wd-10p fontColor"></th>
              </tr>
              <tr>
                <td class="td"><input type="text" name="entry[]" placeholder="Enter entry" class="form-control" /></td>
                <td class="td"><input type="text" name="quantity[]" placeholder="Enter quantity" class="form-control quantity" id="quantity"/></td>
                <td class="td"><input type="text" name="amount[]" placeholder="Enter amount" class="form-control amount" id="amount" /></td>
                <td class="td"><input type="text" name="subtotal[]" placeholder="Subtotal" class="form-control subtotal"id="subtotal" value="0.00" readonly/></td>
                <td class="td2"><button type="button" name="add" id="add-btn" class="btn btn-success">Add More</button></td>
              </tr>
           </table>
           <br>
            <input type="hidden" name="patientId" id="patientId">
            <input type="submit" id="submit" value="Save Invoice" class="btn btn-dark">
          </div>

          {!! Form::close() !!}
        </div>

      </div>
    </div>
  </div>

  <br>
</div>

@endsection

@section('js')
<script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>


</script>
<script type="text/javascript">
  $(document).ready(function () {
    var i = 0;
    $("#add-btn").click(function(){
      ++i;
      $("#dynamicAddRemove").append('<tr><td class="td"><input type="text" name="entry['+i+']" placeholder="Enter entry" class="form-control"/></td><td class="td"><input type="text" name="quantity['+i+']" placeholder="Enter quantity" class="form-control quantity" id="quantity" /></td><td class="td"><input type="text" name="amount['+i+']" placeholder="Enter amount" class="form-control amount" id="amount"/></td><td class="td"><input type="text" name="subtotal['+i+']" placeholder="Subtotal" class="form-control subtotal" value="0.0" id="subtotal" readonly/></td><td class="td2"><button type="button" name="add" id="add-btn" class="btn btn-danger remove-tr">Remove</button></td></tr>');
      });
      $(document).on('click', '.remove-tr', function(){
      $(this).parents('tr').remove();
    });
  });
</script>

<script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
 <script type="text/javascript">
  $(document).ready(function () {

    $('#amount').on('keyup',function(){
      var amount = $(this).val();
      console.log(amount);
      var quantity = $('#quantity').val();
      var subtotal=amount*quantity;
      $('#subtotal').val(subtotal);

      });
      $('#quantity').on('keyup',function(){

      var quantity =$(this).val();
      console.log(amount);
      var amount = $('#amount').val();
      var subtotal=amount*quantity;
      $('#subtotal').val(subtotal);

      });
  });
</script>

@endsection

标签： jquerylaravel

解决方案

您可以使用class选择器，然后使用.closest()and.find()获取所需的数量和数量，然后计算它们并在小计输入中添加新值

演示代码：

var i = 0;
$("#add-btn").click(function() {
  ++i;
  $("#dynamicAddRemove").append('<tr><td class="td"><input type="text" name="entry[' + i + ']" placeholder="Enter entry" class="form-control"/></td><td class="td"><input type="text" name="quantity[' + i + ']" placeholder="Enter quantity" class="form-control quantity"  /></td><td class="td"><input type="text" name="amount[' + i + ']" placeholder="Enter amount" class="form-control amount"/></td><td class="td"><input type="text" name="subtotal[' + i + ']" placeholder="Subtotal" class="form-control subtotal" value="0.0" readonly/></td><td class="td2"><button type="button" name="add" class="btn btn-danger remove-tr">Remove</button></td></tr>');
});
$(document).on('click', '.remove-tr', function() {
  $(this).parents('tr').remove();
});

//on key up of amt & qty
$(document).on('keyup', '.amount , .quantity', function() {
  //get amt and qty value
  var amount = $(this).closest('tr').find('.amount').val();
  var quantity = $(this).closest('tr').find('.quantity').val();
  var subtotal = amount * quantity;
  //add value to required subtotal td
  $(this).closest('tr').find('.subtotal').val(subtotal);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="dynamicAddRemove">
  <tr>
    <th class="wd-15p fontColor">Invoice Entry</th>
    <th class="wd-15p fontColor">Quantity</th>
    <th class="wd-15p fontColor">Amount</th>
    <th class="wd-15p fontColor">Subtotal</th>
    <th class="wd-10p fontColor"></th>
  </tr>
  <tr>
    <td class="td"><input type="text" name="entry[]" placeholder="Enter entry" class="form-control" /></td>
    <td class="td"><input type="text" name="quantity[]" placeholder="Enter quantity" class="form-control quantity" id="quantity" /></td>
    <td class="td"><input type="text" name="amount[]" placeholder="Enter amount" class="form-control amount" id="amount" /></td>
    <td class="td"><input type="text" name="subtotal[]" placeholder="Subtotal" class="form-control subtotal" id="subtotal" value="0.00" readonly/></td>
    <td class="td2"><button type="button" name="add" id="add-btn" class="btn btn-success">Add More</button></td>
  </tr>
</table>

推荐阅读