show total value with more than one select

Navigation
-1

What I want to do is that as I go by selecting the quantity of each product it will add up and then multiply by the unit value 

<script language='javascript'>
        function atualizarValorTotal() {
    $(document).ready(function(){
        var quantidade = $("#quantidade").val();
        var valor_unitario = $("#valor_unitario").val();
        var valor_total = accounting.formatNumber(valor_unitario * quantidade, 2, "", ",");
;
        $("#valor_total").text("R$ " + valor_total);
    });
}

$(document).ready(function(){
    $("#quantidade").change(function(){
        atualizarValorTotal();
    });
});

atualizarValorTotal();
</script>


<div class="modal fade bd-exemple-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="exempleModalLabel">Comprar Saches</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
            <div class="panel-body">
            <table class="table table-hover table-bordered table-list">
              <thead>
                <tr>
                    <!--<th class="hidden-xs">ID</th>-->
                    <th>ID</th>
                    <th>Nome</th>
                    <th>Quantidade</th>

                </tr> 
              </thead>
              <tbody>

                <?php

                    $sql = "SELECT * FROM config";
                    $resultado = mysqli_query($conn,$sql) or die('Erro: ' . mysqli_error($conn));
                    $modo = mysqli_fetch_object($resultado);

                    if($modo->Status == 1){ 
                        echo '
                        <div class="alert alert-warning" role="alert">
                             <center>Desculpe, a lojinha se encontra <font color ="red"><b>FECHADA!</b></font> Entre em contato com o <b>Fernando</b> para mais informações.</center>
                        </div>';
                    }else{

                    $sql5 = "SELECT * FROM tipos_sache";
                    $resultado1 = mysqli_query($conn,$sql5) or die('Erro: ' . mysqli_error($conn));

                    while($row2 = mysqli_fetch_object($resultado1)) {

                        $Prod_id        = $row2->id;
                        $NomeSache      = $row2->nome;
                        $Quantidade     = $row2->quantidade;


                    ?>
                      <tr>
                        <td><?php echo $row2->id ?></td>
                        <td><?php echo $row2->nome ?></td>
                        <td>
                        <div class="form-group">
                          <label class="col-md-4 control-label" for="quantidade"></label>  
                          <div class="col-md-6">
                          <select name="quantidade" id="quantidade" class="col-md-6 form-control">
                            <option value="">Quantidade</option>
                            <option value="0">0</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                            <option value="75">75</option>
                            <option value="100">100</option>
                         </select>
                          </div>
                        </div>
                        </td>
                      </tr>
                      <?php } ?>
                      <?php } ?>
                      </form>
                    </tbody>
            </table>
            <p align="right"><b>Valor total: </b><b id="valor_total"></b></p>
          </div>
            </div>
            <div class="modal-footer">
            <p align="right"><button type="submit" onclick="return FinalizarPedido();" class="btn btn-sm btn-success">Finalizar Pedido</button></p>
            </div>
        </div>
    </div>
</div>
    
asked by anonymous 13.09.2017 / 09:47

1 answer

0

See if this example suits you. The select would be the result of while . 

function  atualizarValorTotal(){
   var valor_total = 0;
   $('select[name^="quantidade"]').val(function(i,val){valor_total += +val; return val;});
   //assumindo que valor_unitario retorne o valor 10
   var valor_unitario = 10;
   var total = (valor_unitario * valor_total).toFixed(2);
   
   //substitui separador decimal ponto por virgula
   total=total.replace(".", ",");
   //coloca ponto como separador de milhar
   total = total.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
   $("#total").text("R$ " + total);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table><tr><td>id1</td><td>nome1</td><td><divclass="form-group">
       <label class="col-md-4 control-label" for="quantidade"></label>  
       <div class="col-md-6">
          <select name="quantidadeUM" class="col-md-6 form-control" onchange="atualizarValorTotal()">
            <option value="">Quantidade</option>
            <option value="0">0</option>
            <option value="25">25</option>
            <option value="50">50</option>
            <option value="75">75</option>
            <option value="100">100</option>
          </select>
       </div>
     </div>
   </td>
  </tr>

  <tr>
   <td>id2</td>
   <td>nome2</td>
   <td>
     <div class="form-group">
       <label class="col-md-4 control-label" for="quantidade"></label>  
       <div class="col-md-6">
          <select name="quantidadeDOIS" class="col-md-6 form-control" onchange="atualizarValorTotal()">
            <option value="">Quantidade</option>
            <option value="0">0</option>
            <option value="25">25</option>
            <option value="50">50</option>
            <option value="75">75</option>
            <option value="100">100</option>
          </select>
       </div>
     </div>
   </td>
  </tr>

  <tr>
   <td>id3</td>
   <td>nome3</td>
   <td>
     <div class="form-group">
       <label class="col-md-4 control-label" for="quantidade"></label>  
       <div class="col-md-6">
          <select name="quantidadeTRES" class="col-md-6 form-control" onchange="atualizarValorTotal()">
            <option value="">Quantidade</option>
            <option value="0">0</option>
            <option value="25">25</option>
            <option value="50">50</option>
            <option value="75">75</option>
            <option value="100">100</option>
          </select>
       </div>
     </div>
   </td>
  </tr>

</table>


<b id="total"></b>

Attribute Starts With Selector [name ^="quantity"] - Selects elements that have the attribute specified with a value that begins exactly with a given string, in this case, quantidade .

adapted script from this source

    
13.09.2017 / 20:51
Access oracle database remotely Error in vector size