Put multiplication result in another input and add the totals

Navigation
2

My goal is to display the sum of the Inputs in the Total Column in the "Total Order" input, where the Addition must also be added (it will be passed in decimal form (%)) and the discount value (will be passed in decimal form (%)).

I tried to follow the logic of javascript presented using addEventListener and parentElement but I did not succeed.

I count on the support of the gentlemen.

Below is the javascript 

window.onload = function () {
var preco = document.getElementById('preco');
var quant = document.getElementById('quant');
var total = document.getElementById('total[]');
var table = document.getElementById('tb_vendas');



/**/
function getMoney( str )
{
        return parseInt( str.replace(/[\D]+/g,'') );
}
function formatReal( int )
{
        var tmp = int+'';
        tmp = tmp.replace(/([0-9]{2})$/g, ",$1");
        if( tmp.length > 6 )
                tmp = tmp.replace(/([0-9]{3}),([0-9]{2}$)/g, ".$1,$2");

        return tmp;
}
/**/
table.addEventListener('input', function(e) {
  var quant = e.target.matches('[name="quant[]"]') && e.target;
  var tr = quant.parentElement;
  while (tr = tr.parentElement) {
    if (tr.matches('tr')) break;
  }
  var preco = tr.querySelector('[name="preco[]"]');
  var total = tr.querySelector('[name="total[]"]');
  total.value = formatReal(Number(preco.value) * Number(quant.value)*100);
});

}

Now follow the HTML: 

<form action="salvar_venda.php" name="form_venda">
<label>Acrescimo(%):</label>
<input name="acrescimo" id="acrescimo" type="text" />
<br/><br/>
<label>Desconto(%):</label>
<input name="desconto" id="desconto" type="text" />
<br/><br/>
<label>Total do Pedido(Soma dos totais da tabela+acrescimo(%)-desconto(%))</label>
<input name="desconto" id="desconto" type="text" />
<br/><br/>
<table width="200" border="1" id="tb_vendas" name="tb_vendas">
  <tr>
    <td>PRODUTO</td>
    <td>VALOR</td>
    <td>QUANTIDADE</td>
    <td>TOTAL</td>
  </tr>
  <tr>
    <td>produto 01 </td>
    <td>
        123,00
        <input type="hidden" value='<?php echo $lp["precodevenda"]; ?>' name="preco[]" id="preco" >
    </td>
    <td><input type="number"  class="form-control" name="quant[]" id="quant" onkeyup="ValidaValor(this, <?php echo $lp["quantidade"]; ?>);" min="1" max="<?php echo  $lp["quantidade"]; ?>"  step="1"></td>
    <td><input type="text" class="form-control calcular"   readonly="readonly"  name="total[]" id="total" ></td>
  </tr>
  <tr>
    <td>produto 02</td>
     <td>
        456,00
        <input type="hidden" value='<?php echo $lp["precodevenda"]; ?>' name="preco[]" id="preco" >
    </td>
    <td><input type="number"  class="form-control" name="quant[]" id="quant" onkeyup="ValidaValor(this, <?php echo $lp["quantidade"]; ?>);" min="1" max="<?php echo  $lp["quantidade"]; ?>"  step="1"></td>
    <td><input type="text" class="form-control calcular"   readonly="readonly"  name="total[]" id="total" ></td>
  </tr>
  <tr>
    <td>produto 03</td>
     <td>
        356,00
        <input type="hidden" value='<?php echo $lp["precodevenda"]; ?>' name="preco[]" id="preco" >
    </td>
    <td><input type="number"  class="form-control" name="quant[]" id="quant" onkeyup="ValidaValor(this, <?php echo $lp["quantidade"]; ?>);" min="1" max="<?php echo  $lp["quantidade"]; ?>"  step="1"></td>
    <td><input type="text" class="form-control calcular"   readonly="readonly"  name="total[]" id="total" ></td>
  </tr>
  <tr>
    <td>produto 04</td>
     <td>
        322,00
        <input type="hidden" value='<?php echo $lp["precodevenda"]; ?>' name="preco[]" id="preco" >
    </td>
    <td><input type="number"  class="form-control" name="quant[]" id="quant" onkeyup="ValidaValor(this, <?php echo $lp["quantidade"]; ?>);" min="1" max="<?php echo  $lp["quantidade"]; ?>"  step="1"></td>
    <td><input type="text" class="form-control calcular"   readonly="readonly"  name="total[]" id="total" ></td>
  </tr>
</table>
</form>
    
asked by anonymous 15.08.2017 / 09:37

1 answer

1

When you use onkeyup="ValidaValor(this, <?php echo $lp[" quantidade "]; ?>);" you are preventing the value of the quantity from changing, ie the second argument of that function never changes even if the input changes.

I suggest another approach: 

var preco = document.getElementById('preco');
var quant = document.getElementById('quant');
var total = document.getElementById('total[]');

quant.addEventListener('input', function() {
  total.value = Number(preco.value) * Number(quant.value);
});
<input type="hidden" id="preco" name="preco[]" value="50" />
<input type="number" name="quant[]" id="quant" class="form-control prc " min="1" max="10" step="1">
<input type="text" name="total[]" id="total[]" class="form-control" value="0">

If you have several rows in a table with these inputs you can not use repeated IDs. In this case you could do something like this: 

var preco = document.getElementById('preco');
var quant = document.getElementById('quant');
var total = document.getElementById('total[]');
var table = document.querySelector('table');

table.addEventListener('input', function(e) {
  var quant = e.target.matches('[name="quant[]"]') && e.target;
  var tr = quant.parentElement;
  while (tr = tr.parentElement) {
    if (tr.matches('tr')) break;
  }
  var preco = tr.querySelector('[name="preco[]"]');
  var total = tr.querySelector('[name="total[]"]');
  total.value = Number(preco.value) * Number(quant.value);
});
<table>
  <thead>
    <tr>
      <th></th>
      <th>Quantidade</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="hidden" name="preco[]" value="50" />
      </td>
      <td><input type="number" name="quant[]" class="form-control prc " min="1" max="10" step="1"></td>
      <td><input type="text" name="total[]" class="form-control" value="0"></td>
    </tr>
    <tr>
      <td><input type="hidden" name="preco[]" value="50" />
      </td>
      <td><input type="number" name="quant[]" class="form-control prc " min="1" max="10" step="1"></td>
      <td><input type="text" name="total[]" class="form-control" value="0"></td>
    </tr>
    <tr>
      <td><input type="hidden" name="preco[]" value="50" />
      </td>
      <td><input type="number" name="quant[]" class="form-control prc " min="1" max="10" step="1"></td>
      <td><input type="text" name="total[]" class="form-control" value="0"></td>
    </tr>

  </tbody>
</table>
    
15.08.2017 / 09:47
Generate the current days of the week? Is it possible to generate excel / csv or pdf from certain columns of a DataTables table?