jquery Somar valores de dois inputs e mostrar em terceiro

[Gabrielvt14 4]

Olá pessoal,

 

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?

[washalbano 54]

Olá!

Tente assim:

$('#entrada input').on('input', function(){
	var valortotal = $('#valor').val(); 
	var entrada    = $(this).val();

	var resultado   = parseInt(valortotal) + parseInt(entrada);
	$('#saldo_total input').val(resultado);
});

[Gabrielvt14 4]

Olá @washalbano, obrigado pela resposta. Mas com esse código não funcionou. O campo #saldo_total ao invés de somar fica com a mensagem NaN

[alexalannunes 1]

Olá. Faz assim

HTML

<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="valor1" value="" ><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" id="valor2" class="form-control col-md-7 col-xs-12 decimal som" name="entrada" value=""><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" id="saldo" class="form-control col-md-7 col-xs-12 decimal" name="saldo" value="" >
	</div>
</div>

JavaScript

$(document).ready(function() {
	$('#valor2').blur(function() {
  	$val1 = parseInt($('#valor1').val());
    $val2 = parseInt($(this).val());
    $('#saldo').val($val1 + $val2)
  });
});

[Gabrielvt14 4]

Olá @alexalannunes. Obrigado pela resposta. Mas ficou do mesmo jeito que o outro código. Ele aparece no campo saldo NaN

 

Eu estou tentado agora desta forma:

    $(document).ready(function() {
      $( "#entrada" ).change(function() {
        var valor = $('#valor').val(); 
        var entrada = $(this).val();
        alert(entrada);
      });
    });

Quando dou alert na variavel 'entrada' ele retorna realmente o valor digitado

Mas quando dou alert na variavel 'valor' (é um campo readonly, onde o valor se preenche automaticamente) ele aparece no alert 'undefined', então creio que ele não esta conseguindo pegar o valor do campo '#valor' :/

[Gabrielvt14 4]

Apaguei os valores que vem do PHP e fiz com o values dos inputs vazios. Aí funcionou. Era o PHP mesmo que estava interferindo no jQuery....
 

O código ficou assim:

jQuery(document).ready(function(){
  jQuery('#entrada').on('keyup',function(){
    if(jQuery(this).attr('id') === 'saldo'){
    return false;
    }
      
    var soma1 = (jQuery('#valor').val() == '' ? 0 : jQuery('#valor').val());
    var soma2 = (jQuery('#entrada').val() == '' ? 0 : jQuery('#entrada').val());
    var result = (parseInt(soma1) + parseInt(soma2));
    jQuery('#saldo').val(result);
    alert(soma1);
  });
});

E o HTML:

<div class="form-group" id="formvalor">
  <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" name="valor" id="valor" value="10" readonly><br>
  </div>
</div>

<div class="form-group">
  <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="valEntrada">
    <input type="text" class="form-control col-md-7 col-xs-12 decimal" name="entrada" id="entrada" value="0"><br>
  </div>
</div>

<div class="form-group">
  <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" id="saldo" value="" readonly>
  </div>
</div>