Sou iniciante no jQuery e não estou conseguindo somar os valores de dois inputs diferentes e mostrar em um terceiro input o resultado sem dar refresh na tela. Alguém poderia me ajudar?
Estes são os campos do formulário:
<div class="form-group" id="formvalor"> <!-- Campo para somar -->
<label class="control-label col-md-3 col-sm-3 col-xs-12">Valor <small>(R$) </small><span class="required">*</span></label>
<div class="col-md-3 col-sm-3 col-xs-12" id="valor_total">
<input type="text" class="form-control col-md-7 col-xs-12 decimal som" name="valor" id="valor" value="<?php echo $vvalor; ?>" readonly><br>
</div>
</div>
<div class="form-group"> <!-- Campo para somar -->
<label class="control-label col-md-3 col-sm-3 col-xs-12">Entrada <small>(R$) </small><span class="required">*</span></label>
<div class="col-md-3 col-sm-3 col-xs-12" id="entrada">
<input type="text" class="form-control col-md-7 col-xs-12 decimal som" name="entrada" value="<?php echo $vvalor; ?>"><br>
</div>
</div>
<div class="form-group"> <!-- Campo para mostrar resultado -->
<label class="control-label col-md-3 col-sm-3 col-xs-12">Saldo <small>(R$) </small><span class="required">*</span></label>
<div class="col-md-3 col-sm-3 col-xs-12" id="saldo_total">
<input type="text" class="form-control col-md-7 col-xs-12 decimal" name="saldo" value="<?php echo $vsaldo; ?>" readonly>
</div>
</div>
Estou tentando usar este script:
$("#valor_total, #entrada").on('blur', function(){
var valortotal = $('#valor_total').val();
var entrada = $('#entrada').val();
var resultado = parseInt(valortotal) + parseInt(entrada);
$('#saldo_total').val(resultado);
});
Quando todos os campos então preenchidos, o resultado da soma não aparece. A div=saldo_total
fica em branco.
Alguém poderia me ajudar?