how to get value from multiple inputs with same name, Input Fields Dynamically with jQuery?

Question

I want to add amount, quantity, subtotal fields as invoice item dynamically clicking on a button.

But the problem is when I want to get the value of quantity and amount input field value to calculate each time, I can't fetch the value using jquery because of same id name.

How can I get the dynamic field value to calculate subtotal.

Here is the code.

@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

Please read minimal reproducible example - it's hard to tell which part of your code you're having trouble with due to all the other code and the vague description. For example, are the 2x $.ajax requests relevant? They don't appear to be, so best remove them from the question so we can help you. — fdomn-m
– fdomn-m, Commented Feb 7, 2021 at 18:19
Give your inputs a class rather than id, eg <input class='quantity' then in your $(".amount") keyup, change to var quantity = $(this).closest("tr").find(".quantity").val() to get the one for the current row. — fdomn-m
– fdomn-m, Commented Feb 7, 2021 at 18:21
thanks for your reply.I have shorten my code so that you can under stand my problem.Can you check it again ..i Can not calculate the subtotal when i have multiple rows of input filed — Rabbi Mahmud
– Rabbi Mahmud, Commented Feb 8, 2021 at 4:11
please mark it as correct if this solves your problem :) it would help others to find the correct solution — Md Somir
– Md Somir, Commented Feb 8, 2021 at 4:44

Md Somir · Accepted Answer · 2021-02-08 04:35:09Z

1

you can use this approach to get the quantity arrays values like:

var quantityArray = $("input[name='quantity[]']")
                    .map(function(){return $(this).val();}).get();

and calculate sum like :

var quantity = quantityArray.reduce(function(a, b) {
                    return parseInt(a, 10) + parseInt(b, 10);
                });

answered Feb 8, 2021 at 4:35

Md Somir

5705 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

how to get value from multiple inputs with same name, Input Fields Dynamically with jQuery?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related