Add values of two inputs and show in third

Navigation
0

I'm a beginner in jQuery and I'm not able to add the values of two different inputs and show a third input the result without refreshing the screen. Could someone help me?

These are the form fields: 

<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>

I'm trying to use this 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);
});

When all fields are filled in, the sum result does not appear. The div=saldo_total is left blank.

Could anyone help me?

    
asked by anonymous 12.06.2017 / 22:54

3 answers

2

Functional example, sum + sum = result. 

jQuery(document).ready(function(){
  jQuery('input').on('keyup',function(){
    if(jQuery(this).attr('name') === 'result'){
    return false;
    }
  
    var soma1 = (jQuery('#soma1').val() == '' ? 0 : jQuery('#soma1').val());
    var soma2 = (jQuery('#soma2').val() == '' ? 0 : jQuery('#soma2').val());
    var result = (parseInt(soma1) + parseInt(soma2));
    jQuery('#result').val(result);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputname="soma1" id="soma1" value="" type="text">
<input name="soma2" id="soma2" value="" type="text">
<input name="result" id="result" value="" type="text">
    
13.06.2017 / 16:11
0

You have missed the ids in the "input" fields which is the place you want to retrieve / input the value ...

  

Example: 

<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" >
        <input type="text" id="valor_total" 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">
        <input type="text" id="entrada" 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" >
        <input type="text" id="saldo_total" class="form-control col-md-7 col-xs-12 decimal" name="saldo" value="<?php echo $vsaldo; ?>" readonly>
    </div>
</div>
    
12.06.2017 / 22:57
0

I may be wrong but judging by the inputs of name="valor" and name="saldo" that are readonly and already have their values, what you imply is typing a value in the input name="entrada" and in the event onblur returns you the result of the sum of the inputs value and balance.

I did it with Javascript so no library needed. 

	function calcular() {
	    var num1 = Number(document.getElementById("valor").value);
	    var num2 = Number(document.getElementById("entrada").value);
	    var num3 = Number(document.getElementById("saldo").value);
	    document.getElementById("saldo").value = parseFloat(num1 + num2 + num3).toFixed(2);
	
	}
	<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="5" 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="valor_entrada">
	        <input type="text" class="form-control col-md-7 col-xs-12 decimal som" name="entrada" id="entrada" onblur="calcular();"><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"  id="saldo" value="10" readonly>
	    </div>
	</div>
  

NOTE: ids were placed on the missing inputs

    
13.06.2017 / 00:16
Refresh contents of a .load () Query_post, get the taxonomy through the custom post field