JSFiddle - React, Tailwind, and code Playground

by luamelo

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
 
<form class="col-xs-12">
  <div class="type-fields">
    <div class="form-group">
      <label for="original-di">ORIGINAL DI</label>
      <input type="text" class="form-control" id="original-di">
    </div>
    <div class="form-group">
      <label for="wg-scout">WG/Scout</label>
      <input type="text" class="form-control" id="wg-scout">
    </div>
    <div class="form-group">
      <label for="transorb-r">TRANSORB R</label>
      <input type="text" class="form-control" id="transorb-r">
    </div>
    <div class="form-group">
      <label for="ultra">ULTRA</label>
      <input type="text" class="form-control" id="ultra">
    </div>
    <div class="form-group">
      <label for="sumisoya">SUMISOYA</label>
      <input type="text" class="form-control" id="sumisoya">
    </div>
  </div>
  
  <div class="form-group">
    <label for="qtd-litros">Qtd Litro Equivalente</label>
    <input type="text" class="form-control" id="qtd-litros" readonly>
  </div>
  <div class="form-group">
    <label for="vol-kregs">Volume em Kregs</label>
    <input type="text" class="form-control" id="vol-kregs" readonly>
  </div>
  <div class="form-group">
    <label for="vol-inc-kregs">Volume Incentivo (Kregs)</label>
    <input type="text" class="form-control" id="vol-inc-kregs" readonly>
  </div>
  <div class="form-group">
    <label for="fator-calculo">Fator calculo</label>
    <input type="text" class="form-control" id="fator-calculo" readonly>
  </div>
  <div class="form-group">
    <label for="premio-roundup">Premiação Roundup</label>
    <input type="text" class="form-control" id="premio-roundup" readonly>
  </div>
  <div class="form-group">
    <label for="premio-sumi">Premiação Sumisoya</label>
    <input type="text" class="form-control" id="premio-sumi" readonly>
  </div>
  <div class="form-group">
    <label for="premio-total">PREMIAÇÃO TOTAL</label>
    <input...

JavaScript

var field = {
		original_di: $('#original-di'),
    wg_scout: $('#wg-scout'),
    transorb_r: $('#transorb-r'),
    ultra: $('#ultra'),
    sumisoya: $('#sumisoya'),
    qtd_litros: $('#qtd-litros'),
    vol_kregs: $('#vol-kregs'),
    vol_inc_kregs: $('#vol-inc-kregs'),
    fator_calculo: $('#fator-calculo'),
    premio_roundup: $('#premio-roundup'),
    premio_sumi: $('#premio-sumi'),
    premio_total: $('#premio-total')
};

var base_semisoya = {
		centro: 12.9,
    norte: 12.9,
    sul: 16.4
};


$('.type-fields').on('keyup', 'input', function(){
	
  var calculo_prod = {
  		wg: 2.0 * changeDot(field.wg_scout.val()),
      transorb_r: 1.3 * changeDot(field.transorb_r.val()),
      ultra: 1.8 * changeDot(field.ultra.val()),
      sumisoya: changeDot(field.sumisoya.val())
  };
  
  var calculo_prod_total = calculo_prod.wg + calculo_prod.transorb_r + calculo_prod.ultra + calculo_prod.sumisoya;
  
  console.log(calculo_prod_total);
});

function changeDot(val){
	var newVal = val.replace(',','.');
  return newVal;
};