Calculation of Ajax Dynamic Products

Question

Good morning. I’m a novice programmer, and I’m developing a sales web app, where my system generates inputs dynamically for each product, multiplying the product price by quantity. But now I need him to add those figures to the final value of the sale.

Form code:

        <form name="cadastro_venda" id="cadastro_venda">

            <div class="table-responsive">

                <table class="table table-bordered" id="dynamic_field_venda">

                    <tr class="row">

                        <td>

                            <div class="input-field col s6">

                                <input placeholder="Digite o Produto" name="input_produto_venda[]" type="text" class="validate">
                                <label class="active" for="input_produto_venda[]">Produto</label>
                            </div>

                            <div class="input-field col s2">

                                <input placeholder=" " name="input_quantidade_venda[]" class="input_quantidade_venda" type="text" class="validate" value="1">
                                <label class="active" for="input_quantidade_venda[]">Quantidade</label>
                            </div>

                            <div class="input-field col s2">

                                <div class="input_preco_venda"></div>
                                <label class="active" for="input_preco_venda[]">Preço</label>
                            </div>

                            <div class="input-field col s2">

                                <button type="button" class="btn-floating btn-large waves-effect waves-light grey darken-3" id="add" name="add" ><i class="material-icons">add</i></button>
                            </div>
                        </td>
                    </tr>
                </table>

                <div class="row">

                    <div class="input-field col s3">

                        <?php echo "O Total é: R$" ?><div class="soma_venda"></div>
                    </div>

                    <div class="input-field col s9">

                        <a type="button" name="submit" id="submit" class="waves-effect waves-light grey darken-3 btn fonte_button modal-trigger"><i class="material-icons left">attach_money</i>Registrar Venda</a>
                    </div>
                </div>
            </div>
        </form>

Code that generates dynamic inputs:

        <script>


            $(document).ready(function () {


                $(document).on("keyup", ".input_quantidade_venda", function(){


                    var indice = $(".input_quantidade_venda").index(this);

                    var n1 = parseInt(this.value, 10);

                    $('.input_preco_venda:eq('+indice+')').html(n1 * 10);
                });

                var i = 1;

                $('#add').click(function () {

                    i++;

                    $('#dynamic_field_venda').append('<tr class= "row" id="row' + i + '"><td><div class="input-field col s6"><input placeholder="Digite o Produto" name="input_produto_venda[]" type="text" class="validate"><label class="active" for="input_produto_venda[]">Produto</label></div><div class="input-field col s2"><input placeholder=" " name="input_quantidade_venda[]" class="input_quantidade_venda" type="text" class="validate" value="1"><label class="active" for="input_quantidade_venda[]">Quantidade</label></div><div class="input-field col s2"><div class="input_preco_venda"></div><label class="active" for="input_preco_venda[]">Preço</label></div><div class="input-field col s2"><button type="button" class="btn-floating btn-large waves-effect waves-light grey darken-3 btn btn-danger btn_remove" name="remove" id="' + i + '"><i class="material-icons">remove</i></button></div></td> </tr>');
                });

                $(document).on('click', '.btn_remove', function () {

                    var button_id = $(this).attr("id");
                    $('#row' + button_id + '').remove();
                });

                $('#submit').click(function(){

                    $.ajax({

                        url:"components/cad_venda.php",
                        method:"POST",
                        data:$('#cadastro_venda').serialize(),
                        success:function(data) {

                            alert(data);
                            $('#cadastro_venda')[0].reset();
                        }
                    });
                });

                M.updateTextFields();
            });
        </script>

Code multiplying product price by quantity:

    <script>


        $(document).on("keyup", ".input_quantidade_venda", function(){


           var indice = $(".input_quantidade_venda").index(this);

            var n1 = parseInt(this.value, 10);

            $('.input_preco_venda:eq('+indice+')').html(n1 * 10);
        });
    </script>

Answer 1

Create a function that will sum the values:

function somaTotal(){
   var total = 0;

   $(".input_preco_venda").each(function(){
      total += parseFloat($(this).text());
   });

   $(".soma_venda").text(total);
}

Call the function at the end of the event $(document).on("keyup", ".input_quantidade_venda", function(){... and the event $(document).on('click', '.btn_remove', function () {...

The function will go through all values, add and send to the div.soma_venda the result of the sum.

It’ll stay that way:

$(document).on("keyup", ".input_quantidade_venda", function(){

   var indice = $(".input_quantidade_venda").index(this);
   var n1 = parseInt(this.value, 10);
   $('.input_preco_venda:eq('+indice+')').html(n1 * 10);

   somaTotal();

});

and

$(document).on('click', '.btn_remove', function () {

   var button_id = $(this).attr("id");
   $('#row' + button_id + '').remove();

   somaTotal();

});