Sum values of two inputs and show in third

Asked

Viewed 2,794 times

0

I’m a beginner in jQuery and I’m not being able to add up the values of two different inputs and show in 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 then filled in, the sum result does not appear. A div=saldo_total goes blank.

Could someone help me?

javascript jquery onblur

  • Where are you calling the script? Is it at the click of a button? At the on-change event? At the page load? https://api.jquery.com/category/events/ If you want something dynamic, try "change"

  • It is in the exchange of input. With onblur. But I believe that change would also solve

  • Possible duplicate of Add inputs with jquery and real time

  • Hello @Matthew Veloso. I tried to follow the comments of this topic but could not solve my problem with it, so I opened this

  • Check below my answer.

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>
<input name="soma1" id="soma1" value="" type="text">
<input name="soma2" id="soma2" value="" type="text">
<input name="result" id="result" value="" type="text">

  • Thank you for the reply @Mateus Veloso. But in my code, the summ1 field would already be filled in automatically, and I would only fill in the summ2 to show the result in the result But when I give Alert(summ1) the Alert returns the Undefined message :/

  • How are you getting the soma1 ? show your Alert.

  • var value = $('#value'). val(); Alert (value);

  • I believe it is the value of the input, it is filled automatically with PHP. But the strange thing is that when I go to inspect element in the browser, the value of the input is filled with the value that really is in it

  • In case, I traded soma1 for #value

  • yes, the problem is the moment you take this value, it may not have 'loaded' still understand? try to put on an onload or use jQuery as I did above, putting Alert inside the ready() so you ensure that the element has already been written in your gift.

  • Reducing, put your Alert inside this function: jQuery(document).ready(function(){ alert..... })

  • So he didn’t bring the Alert... I’ll put the code in the gist to analyze it better, if possible

  • https://gist.github.com/anonymous/a5e73dfd84fabfba1f011b3133932ed3

  • Put Alert below this code snippet : jQuery('#balance'). val(result);

  • It would look like jQuery('#balance'). val(result); Alert....

  • This way he returns Alert as Undefined again

  • Want to move the discussion to chat? Ja esta muito extensa...

  • Let’s go continue this discussion in chat.

Show 9 more comments

0

Missed you put the ids in the "input" fields which is the location you want to retrieve/inputar 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>

0

I may be wrong, but judging by the inputs from name="valor" and name="saldo" which are read-only (readonly) and already has its values, what you imply is that you enter a value in the input name="entrada" and in the event onblur returns the result of the sum of inputs entry value and balance.

I have done with Javascript, so it is not necessary any library.

	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>

OBS: ids were placed on missing inputs

  • Hello @Leo Caracciolo. Thank you for the reply. But I wanted to perform the operation with jQuery, so as soon as the fields are filled in, perform the calculation

  • @Gabriel is, in its tags has javascript, so I chose the simplest that does not need third party library

  • @Gabriel your question does not match your HTML, vc has two read-only inputs (readonly) already filled, leaving only one to enter some value

  • Yes. The first readonly already comes with filled value. The second Voce enters the value and calculates with the first, and the third field, which is the second readonly, is where it shows the result of this calculation... The @Mateus Veloso already helped me with this and I ended up discovering that I could not add up because the values passed by PHP were interfering with the first input (Its automatic values come from PHP). I created another topic to try to resolve this https://answall.com/questions/212544/passar-values-de-inputs-para-php

Browser other questions tagged javascript jquery onblur

You are not signed in. Login or sign up in order to post.