How can I calculate elements in Javascript

Question

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

Whereas:

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

The total amount of commission = R$ 475,00

html

<script src="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 HTML (Add Plan) button

<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);
    };

Follows the code

Answer 1

I changed a few things in the code you made available. I didn’t understand the use of reduce and a mask function that does not exist. But to perform this calculation, you can simply get the values using val() and carry out 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>
<select id="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>

Answer 2

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

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ão do Vendedor:</b>
<input type="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 add elements dynamically:

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ão do Vendedor:</b>
<input type="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>

Answer 3

If it is worth changing the HTML, you can always make a selector that selects all the elements when one of these 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ão do Vendedor:</b>
<comissao><input type=text/></comissao>

<hr/>
<calc-comissao>
  <select>
<option value="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/>