Multiplication and sum of dynamic inputs

Question

Multiplication and sum of dynamic inputs

Navigation

#1 by (4 votes)

4

Note: Developed with Laravel 5.7. Note 2: This is the "New Order" view.

The form will dynamically receive the products according to their previously registered items. Until then, okay!

The user will bookmark the product and enter the desired quantity. The problem is this:
Multipicar the unit value by the amount and add the results

<div class="form-check">
  @php
  $p = count($produtos);
  $i = 0;
  @endphp
  @foreach ($produtos as $produto)
  @php
  $i++;
  @endphp
  <div class="row ">
    <div class="col-8 produto">
      <input class="form-check-input" type="checkbox" id="produto_id[{{ $i }}]" value="{{ $produto->id }}" name="produto_id[{{ $i }}]" >
      <label class="form-check-label" for="inlineCheckbox1" style="margin-right: 10px">{{ $produto->nome }} - R$ {{ $produto->valor }}</label>
        <div class="valor">
        <input type="hidden" name="val_un[{{ $i }}]" value="{{ $produto->valor }}" id="val_un[{{ $i }}]">
        </div>  
    </div>
    <div class="col fields">
      <input class="form-control" type="text" id="quantidade[{{ $i }}]" name="quantidade[{{ $i }}]" onblur="sum()" placeholder="Quantidade" >  
    </div>  
  </div>
  <hr>
  @endforeach
  <script type="text/javascript">
    function sum()
      {
        let total = 0;
        let valor = 0;
        let valor_un = 0;

        $('.fields input').each(function() {
            valor =  $('.fields input').val();
            valor_un =  $('.valor input').val();
            total_un = valor*valor_un;

            total = ????????????????????????????????????
        });
          $('#total').val(total);
      }
  </script>


</div>
<div class="row">
  <div class="col-8">
    <div class="form-group">
      <label for="total">Valor Total</label>
      <input type="total" class="form-control" id="total" name="total" aria-describedby="emailHelp" value="">
    </div>        
  </div>

php javascript laravel sum

asked by anonymous 13.12.2018 / 15:25

1 answer

How to change the wordpress blog title in php? How to use emails in Azure?

score 4 · Accepted Answer

Considering that the values in% with% have the format separating decimal places with period (eg, value="{{ $produto->valor }}" or 70.02 ).

Since you are making a loop in the inputs, instead of 50.00 , it would be valor = $('.fields input').val(); , where valor = $(this).val(); refers to each loop element.

To get the value of the product, you can use the selector:

$('[name="val_un['+i+']"]').val()

The $(this) concatenated in i is each iteration of the loop, which starts with name :

                                 ↓
$('.fields input').each(function(i) {...

To add the values, you do:

total += total_un;

In total value I made a treatment to be in the format with comma:

function sum(){
   let total = 0;
   let valor = 0;
   let valor_un = 0;
   $('.fields input').each(function(i) {
      valor =  $(this).val();
      // pega o valor correspondente
      valor_un =  $('[name="val_un['+i+']"]').val();
      total_un = valor*valor_un;
   
      total += total_un;
   });
   
   // aqui eu substituo o ponto por vírgula para ficar no formato brasileiro
   // convertendo o número em string com .toFixed(2)
   // para poder fazer o replace
   total = total.toFixed(2).replace('.', ',');
   
   $('#total').val(total);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="row ">
    <div class="col-8 produto">
      <input class="form-check-input" type="checkbox" id="produto_id[0]" value="1" name="1" >
      <label class="form-check-label" for="inlineCheckbox1" style="margin-right: 10px">prod1 - R$ 50,13</label>
        <div class="valor">
        <input type="hidden" name="val_un[0]" value="50.13" id="val_un[0]">
        </div>  
    </div>
    <div class="col fields">
      <input class="form-control" type="text" id="quantidade[0]" name="quantidade[0]" onblur="sum()" placeholder="Quantidade" >  
    </div>  
  </div>
  <hr>
 <div class="row ">
    <div class="col-8 produto">
      <input class="form-check-input" type="checkbox" id="produto_id[1]" value="2" name="2" >
      <label class="form-check-label" for="inlineCheckbox1" style="margin-right: 10px">prod2 - R$ 70,02</label>
        <div class="valor">
        <input type="hidden" name="val_un[1]" value="70.02" id="val_un[1]">
        </div>  
    </div>
    <div class="col fields">
      <input class="form-control" type="text" id="quantidade[1]" name="quantidade[1]" onblur="sum()" placeholder="Quantidade" >  
    </div>  
  </div>
  <hr>
total: <input id="total">