How can I calculate the elements in Javascript

Navigation
0

I need to get the value id="valorPorcentagem" which is the value of the percentage with the (id="valor_vendedor") and automatically add in the id="comissao" .

Being that: 

valorPorcentagem / 100 x valor_vendedor = comissao
20 / 100 x 800,00 = 160,00
45 / 100 x 700,00 = 315,00

The total amount of the commission = R $ 475,00

html

<scriptsrc="https://code.jquery.com/jquery-3.1.1.js"></script>
<b>Comissão do Vendedor:</b>
<input type="text" name="total" id="comissao" readonly>
<br><br>

<select id="valorPorcentagem">
  <option value="20">20</option>
    <option value="45">45</option>
</select>

<input id="valor_vendedor" onkeyup="calcular()">

javascript 

function calcular() {
    var soma = $('.calcular').get().reduce(function(soma, el) {
        return (parseFloat(el.value.replace(/\./g, "").replace(",", "."), 10) || 0) + soma;
    }, 0);

    soma = soma.toFixed(2);

    document.getElementById('comissao').value = soma;
    mascara(document.getElementById('comissao'), mreais);
}

The (Add Plan) button in HTML 

<input type="text" name="usuarios[0][comissao_vendedor]" id="valor_vendedor" class="calcular form-control" placeholder="R$" onkeypress="mascara(this,mreais)" onkeyup="calcular()">

$ js 

var AddTableRow = function(el) {
        var tbody = $(el).closest('table').find('tbody');
        var row = tbody.find('tr:last').clone();
        var name = row.find('.calcular').attr('name');
        var index = parseInt(name.match(/informacao\[(\d+)\]\[porcentagem\]/)[1], 10) + 1;
        row.find('[name^="informacao["]').each(function() {
            if (this.name) {
                this.name = this.name.replace(/^informacao\[\d+\]/, "informacao[" + index + "]");
            }
        });
        tbody.append(row);
    };

Follow the code

    
asked by anonymous 30.01.2017 / 18:24

3 answers

1

I know it was not the main focus of the question, but I saw that it will work with more than one input field, so there's a version of how you could work:

Adaptations fit. 

function calcular() {
  contador = 1;
  elementos = [];
  // Procuro todos elementos que possuem o pseudo-metodo "fazparte" e que estao visiveis no formulario
  jQuery('input[fazparte]:visible').each(function() {
    // Teoricamente os campos adicionados dinamicamente devem possuir id 
    // diferenciado, por um contador talvez? enfim, uso esse contador para
    // adicionar em um array que irei usar futuramente para fazer o calculo
    if (jQuery(this)[0].value != "") {
      elementos.push(contador);
    }
    contador++;
  });
  var valorFinal = 0;
  for (var i in elementos) {
    // Para cada input que possui valor, faco uma somatória das porcentagens 
    //dos elementos que possuem um valor setado, e jogo no valor final da comissão
    valorFinal += ((document.getElementById("porcentagem"+elementos[i]).value)/100)*(document.getElementById("valor"+elementos[i]).value)
  }
  document.getElementById("comissao").value = valorFinal;
}
<script src="https://code.jquery.com/jquery-3.1.1.js"></script><b>ComissãodoVendedor:</b><inputtype="text" name="total" id="comissao" readonly>
<br>
<br>

<select id="porcentagem1" onchange="calcular()">
  <option value="20">20</option>
  <option value="40">40</option>
</select>

<input id="valor1" onblur="calcular()" fazparte>
<br/>
<select id="porcentagem2" onchange="calcular()">
  <option value="10">10</option>
  <option value="45">45</option>
</select>

<input id="valor2" onblur="calcular()" fazparte>

To dynamically add elements: 

function calcular() {
  contador = 1;
  elementos = [];
  jQuery('input[fazparte]:visible').each(function() {
    if (jQuery(this)[0].value != "") {
      elementos.push(contador);
    }
    contador++;
  });
  var valorFinal = 0;
  for (var i in elementos) {
    valorFinal += ((document.getElementById("porcentagem" + elementos[i]).value) / 100) * (document.getElementById("valor" + elementos[i]).value)
  }
  document.getElementById("comissao").value = valorFinal;
}

function adicionarElemento() {
  var contador = 0;
  jQuery('input[fazparte]:visible').each(function() {
    contador++;
  });
  // Aqui a logica de adicionar um proximo elemento para
  // funcionar na logica acima so sera necessario criar o proximo id corretamente, 
  // desse modo mesmo que o input
  // existir, se ele nao for setado, nao vai alterar em nada o valor da comissao
  var elemento = '<br/><select id="porcentagem' + (contador + 1) + '" onchange="calcular()"><option value="10">10</option><option value="45">45</option></select><input id="valor' + (contador + 1) + '" onblur="calcular()" fazparte>';
  $("#valor" + (contador)).after(elemento);
}
<script src="https://code.jquery.com/jquery-3.1.1.js"></script><b>ComissãodoVendedor:</b><inputtype="text" name="total" id="comissao" readonly>
<button onclick="adicionarElemento()">Adicionar plano</button>
<br>
<br>

<select id="porcentagem1" onchange="calcular()">
  <option value="20">20</option>
  <option value="40">40</option>
</select>

<input id="valor1" onblur="calcular()" fazparte>
<br/>
<select id="porcentagem2" onchange="calcular()">
  <option value="10">10</option>
  <option value="45">45</option>
</select>

<input id="valor2" onblur="calcular()" fazparte>
    
30.01.2017 / 18:56
2

I've changed some things in the code you've made available. I did not understand the use of reduce and a mask function that does not exist. But to do this calculation, you can simply get the values using val() and perform the operation: 

function calcular() {
  var comissao = (parseFloat($("#valorPorcentagem").val())/100) * parseFloat($("#valor_vendedor").val());
  $("#comissao").val(comissao);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><selectid="valorPorcentagem">
  <option value="20">20</option>
  <option value="45">45</option>
</select>

<input id="valor_vendedor" onkeyup="calcular()">
<b>Comissão do Vendedor:
</b>
<input type="text" name="total" id="comissao" readonly>
    
30.01.2017 / 18:48
0

If you change HTML, you can always make a selector that selects all the elements when one of them is changed, calculate the percentage of it, reduce the list to the sum of them and present the result in an input: 

$.fn.reduce = [].reduce;

$('body').on('change', 'calc-comissao input' ,function(event, something) {
var total = $('calc-comissao input')
  .map(function(index, ele) { 
  	return (ele.parentNode.querySelector('select').value / 100) * ele.value; 
  })
  .reduce(function(last, value) { return parseFloat(last) + parseFloat(value)});
  $('comissao input').val(total.toFixed(2));
});
<script src="https://code.jquery.com/jquery-3.1.1.js"></script><b>ComissãodoVendedor:</b><comissao><inputtype=text/></comissao><hr/><calc-comissao><select><optionvalue="20">20</option>
<option value="40">40</option>
  </select>
  <input type="number" value=0/>
</calc-comissao>
<br/>

<calc-comissao>
  <select>
<option value="10">10</option>
<option value="70">70</option>
  </select>
  <input type="number" value=0/>
</calc-comissao>
<br/>
    
30.01.2017 / 20:11
Which way to delete element of a vector correctly? C ++ UTF8 in PHP MySQL connection