Dynamic Tag Values Calculation

Question

Dynamic Tag Values Calculation

Navigation

#1 by (1 votes)

0

Talk to everyone, baby, with you? I'm tinkering with my system (read laboratory).

I've basically created the whole Back-End, but on the front I'm getting some treatments.

I am creating a budgets screen, where the User is dynamically opening new lines for each product added.

My code looks like this:

function id(valor_campo) {
  return document.getElementById(valor_campo);
}

function getValor(valor_campo) {
  var valor = document.getElementById(valor_campo).value.replace(',', '.');
  return parseFloat(valor);
}

function multiplica() {
  var total = getValor('qtd') * getValor('valoru');
  id('valort').value = total;
}

$(document).ready(function() {
  var max_fields = 100;
  var x = 1;
  $('#add_field').click(function(e) {
    e.preventDefault(); //prevenir novos clicks
    if (x < max_fields) {
      $('#listas').append('\
                    <tbody>\
                        <tr class="remove' + x + '">\
                        <td><input type="text" name="qtd[]" id="qtd[]" placeholder="N°"></td>\
                        <td><input type="text" name="item[]" id="item" placeholder="Descrição do Produto ou Serviço"></td>\
                        <td><input type="text" name="valoru[]" onblur="multiplica()" id="valoru[]" placeholder="Valor"></td>\
                        <td><input type="text" name="valort[]" id="valort[]" maxlength="100" /></td>\
                        </td>\
                        <td><a href="#" class="remove_campo" id="remove' + x + '"><button type="button" class="btn-danger">Remover</button></a></td>\
                    </tbody>\
                ');
      x++;
    }
  });


  $('#listas').on("click", ".remove_campo", function(e) {
    e.preventDefault();
    var tr = $(this).attr('id');

    $('#listas tr.' + tr).remove();
    x--;
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableid="listas" class="table table-hover">
  <thead>
    <tr>
      <th>Qtd</th>
      <th>Item</th>
      <th>Valor Unitário</th>
      <th>Valor Total</th>
      <th>Ação</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" name="qtd[]" id="qtd" placeholder="N°"></td>
      <td><input type="text" name="item[]" id="item" placeholder="Descrição do Produto ou Serviço" /></td>
      <td><input type="text" name="valoru[]" id="valoru" onblur="multiplica()" /></td>
      <td><input type="text" name="valort[]" id="valort" /></td>
      <td></td>
    </tr>
  </tbody>
</table>

I ended up riding based on tips from other users here. But I want to do the calculation of the input qtd by multiplying the value of valoru showing total in valort

But when I add another line, my code simply can not do the calculation (I guess it's because of the ID being repeated). What would be the best way to get around this?

Thanks to all who can help me. A warm hug and good coffee in this cold = P

javascript html

asked by anonymous 16.06.2018 / 21:44

1 answer

Align ion-navbar elements - Ionic How to change an image using the commandButton in Java PrimeFaces?

score 1 · Accepted Answer

Yes, the problem was the id, you already knew the solution, you just did the same thing you did to remove the line, use x to create unique ids

I also arranged to insert new rows, which previously added a tbody to the table instead of a tr in the table body

Another detail, instead of decreasing the value of x when removing a line, increased the value of max_fields , not to have conflict when creating and deleting lines

function id(valor_campo) {
  return document.getElementById(valor_campo);
}

function getValor(valor_campo) {
  var valor = document.getElementById(valor_campo).value.replace(',', '.');
  return parseFloat(valor);
}

function multiplica(x) {
  var total = getValor('qtd'+x) * getValor('valoru'+x);
  id('valort'+x).value = total;
}

$(document).ready(function() {
  var max_fields = 100;
  var x = 1;
  $('#add_field').click(function(e) {
    e.preventDefault(); //prevenir novos clicks
    if (x < max_fields) {
      $('#listas').append('\
                        <tr class="remove' + x + '">\
                        <td><input type="text" name="qtd[]" id="qtd'+x+'" placeholder="N°"></td>\
                        <td><input type="text" name="item[]" id="item" placeholder="Descrição do Produto ou Serviço"></td>\
                        <td><input type="text" name="valoru[]" onblur="multiplica('+x+')" id="valoru'+x+'" placeholder="Valor"></td>\
                        <td><input type="text" name="valort[]" id="valort'+x+'" maxlength="100" /></td>\
                        </td>\
                        <td><a href="#" class="remove_campo" id="remove' + x + '"><button type="button" class="btn-danger">Remover</button></a></td>\
                ');
      x++;
    }
  });


  $('#listas').on("click", ".remove_campo", function(e) {
    e.preventDefault();
    var tr = $(this).attr('id');

    $('#listas tr.' + tr).remove();
    max_fields++;
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttonid='add_field'>ADD</button><tableclass="table table-hover">
  <thead>
    <tr>
      <th>Qtd</th>
      <th>Item</th>
      <th>Valor Unitário</th>
      <th>Valor Total</th>
      <th>Ação</th>
    </tr>
  </thead>
  <tbody id="listas">
    <tr>
      <td><input type="text" name="qtd[]" id="qtd0" placeholder="N°"></td>
      <td><input type="text" name="item[]" id="item" placeholder="Descrição do Produto ou Serviço" /></td>
      <td><input type="text" name="valoru[]" id="valoru0" onblur="multiplica('0')" /></td>
      <td><input type="text" name="valort0" id="valort0" /></td>
      <td></td>
    </tr>
  </tbody>
</table>