Dynamic pricing

Question

Dynamic pricing

Navigation

#1 by (1 votes)

0

I'm developing a web app sales system, where you can put multiple products in 1 sale, increasing inputs dynamically.

It calculates the price of each product by multiplying by quantity automatically, but I can only do this in the first input . I need it to compute on the other inputs .

Follow the code:

// A função que multiplica o preço do produto pela quantidade:
function calcular_preco_produto() {
    var n1 = parseInt(document.getElementById('input_quantidade_venda[]').value, 10);
    document.getElementById('input_preco_venda[]').innerHTML = n1 * 10;
}

// A função que gera inputs dinamicamente:
$(document).ready(function () {
  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[]" id="input_quantidade_venda[]" type="text" class="validate" value="1" onkeyup="calcular_preco_produto()"><label class="active" for="input_quantidade_venda[]">Quantidade</label></div><div class="input-field col s2"><div id="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();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><formname="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[]" id="input_quantidade_venda[]" type="text" class="validate" value="1" onkeyup="calcular_preco_produto()">
                      <label class="active" for="input_quantidade_venda[]">Quantidade</label>
                   </div>
                   <div class="input-field col s2">
                      <div id="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>
          <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>
    </form>

javascript jquery

asked by anonymous 08.12.2018 / 13:23

1 answer

How to upgrade Node.js from version 8 to 10 on Linux Ubuntu via SSH? Creating components from another base component

score 1 · Accepted Answer

Do not use brackets [] on id's. In fact, neither id's should use, because it is repeating them when adding a new element. Replace with% with% of id's repeated. The brackets should only come in the class attribute.

Avoid using name . In my opinion it makes the code more polluted and bad to work with, and you can not even put the calling function within the scope of onkeyup="função()" .

Use a .ready event using jQuery and throw the calculation value into the div with the input class, using jQuery's keyup . That is, each index entry :eq(índice) has a div with index 0 , just like a% index index% has a div with the same index.

In short, remove all onkeyup's, the 0 function, change the id's by class, leave the brackets only in 1 's, and place within the calcular_preco_produto() the event handler below:

// A função que multiplica o preço do produto pela quantidade:
$(document).on("keyup", ".input_quantidade_venda", function(){

   // pego o índice da classe
   var indice = $(".input_quantidade_venda").index(this);

    var n1 = parseInt(this.value, 10);
    // aplico a outra classe com o mesmo índice
    $('.input_preco_venda:eq('+indice+')').html(n1 * 10);

});

See how much simpler it is:

// A função que gera inputs dinamicamente:
$(document).ready(function () {
   
   // A função que multiplica o preço do produto pela quantidade:
   $(document).on("keyup", ".input_quantidade_venda", function(){
   
      // pego o índice da classe
      var indice = $(".input_quantidade_venda").index(this);
      
       var n1 = parseInt(this.value, 10);
       // aplico a outra classe com o mesmo índice
       $('.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();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><formname="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>
       <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>
 </form>