21

Minha dúvida é a seguinte: Eu tenho duas inputs type text. Uma pessoa colocava um número na input 1 e outro número na input 2.

Quando a pessoa acabava de preencher, aparecia automaticamente o resultado da soma das 2 inputs em tempo real, sem precisar de mudar de página.

Se eu colocasse no primeiro input 5 e no segundo input 10, ai quando terminasse de preencher aparecia assim:

A soma dos dois números é 15.

Ou seja, em tempo real sem ter que clicar em nada ou assim.

1
  • E qual é a dúvida/problema? Commented 18/09/2015 às 17:18

6 Respostas 6

16

Com javascript pura basta pegar os valores dos campos pelo id, com document.getElementById() converter os valores para int utilizando parseInt(), o número 10 significa em qual base será convertido o número, somar e jogar o resultado no input.

function calcular() {
  var n1 = parseInt(document.getElementById('n1').value, 10);
  var n2 = parseInt(document.getElementById('n2').value, 10);
  document.getElementById('resultado').innerHTML = n1 + n2;
}
<form action="" method="post">
  N1: <input type="text" id="n1" value="10" /> <br> N2: <input type="text" id="n2" value="5" onblur="calcular()" /> <br>
</form>

<div id="resultado"></div>

5
  • Boa tarde, no caso eu nao queria um input com valor de calcular o preço, mas já consegui com a ajuda dos amigos abaixo.
    – Gonçalo
    Commented 18/09/2015 às 18:30
  • 1
    @Gonçalo o código que faz o calculo so é executado ao sair do n2 não precisa clicar no botão.
    – rray
    Commented 18/09/2015 às 18:32
  • Já etendi, no caso como faria para que aparece o resultado sem ser em input, ou entao que esconde a borda da input?
    – Gonçalo
    Commented 18/09/2015 às 18:34
  • 1
    Pode remover o input resultado, e criar uma div com o id resultado e fazer a atribuição, nesse caso não tem o value, para remover bordars é preciso usar css.
    – rray
    Commented 18/09/2015 às 18:36
  • Tentei fazer isso só que o resultado nao aparece.
    – Gonçalo
    Commented 18/09/2015 às 18:38
10

Basta atribuir ao evento onblur uma função para fazer o cálculo buscando os valores das fontes e atribuindo o resultado no destino. O onblur é antagônico ao onfocus, então vai ser disparado quando seu input perder o foco. Você pode optar por utilizar o evento onkeyup para que o cálculo ocorra em tempo de digitação.

HTML

<input type="text" id="num1" onblur="calcular();" />
<input type="text" id="num2" onblur="calcular();" />
<span id="resultado"></span>

JavaScript

function calcular() {
    var num1 = Number(document.getElementById("num1").value);
    var num2 = Number(document.getElementById("num2").value);
    var elemResult = document.getElementById("resultado");

    if (elemResult.textContent === undefined) {
       elemResult.textContent = "O resultado é " + String(num1 + num2) + ".";
    }
    else { // IE
       elemResult.innerText = "O resultado é " + String(num1 + num2) + ".";
    }
}

Edit 1

Código alterado para dar o resultado num span em vez de um input.

3
  • Boa Tarde, no caso eu não queria que aparecesse na resposta a caixinha da input, como faria para tirar a caixinha e deixar apenas o resultado?
    – Gonçalo
    Commented 18/09/2015 às 18:29
  • @Gonçalo utilize um span e atribua o resultado pela propriedade textContet. document.getElementById("resultado").textContent = "A soma dos dois numeros é " + String(num1 + num2) + ".";
    – MFedatto
    Commented 18/09/2015 às 19:44
  • Amigo pode dar o exemplo no codigo acima de como fazer? Obrigado.
    – Gonçalo
    Commented 19/09/2015 às 0:05
9

Estou deixando minha resposta, apenas como alternativa às outras.

No exemplo estou usando o evento onfocus para disparar a função que faz o cálculo dos dois inputs quando o usuário clicar no primeiro campo e o evento onblur para disparar a função quando o usuário sair do segundo campo, apenas para mostrar a diferença entre os dois eventos.

Existem infinitas outras possibilidades para fazer o que você deseja, mas isso é o suficiente para resolver seu problema.

function calcular(){
    var valor1 = parseInt(document.getElementById('txt1').value, 10);
    var valor2 = parseInt(document.getElementById('txt2').value, 10);
    document.getElementById('result').value = valor1 + valor2;
}
<input id="txt1" type="text" value="1" onfocus="calcular()"/>
<input id="txt2" type="text" value="1" onblur="calcular()"/>

<input id="result" type="text"/>

1
  • Boa Tarde, no caso eu não queria que aparecesse na resposta a caixinha da input, como faria para tirar a caixinha e deixar apenas o resultado?
    – Gonçalo
    Commented 18/09/2015 às 18:29
7

segue uma implementação usando o evento input e permitindo a escolha de outros operadores.

var campo1 = document.getElementById("campo1");
var campo2 = document.getElementById("campo2");
var operador = document.getElementById("operador");
var resultado = document.getElementById("resultado");
var somenteNumeros = new RegExp("[^0-9]", "g");

var toNumber = function (value) {
  var number = value.replace(somenteNumeros, "");    
  number = parseInt(number);    
  if (isNaN(number)) 
    number = 0;
  return number;
}

var somenteNumeros = function (event) {
  event.target.value = toNumber(event.target.value);
}

var onInput = function (event) {
  var num1 = toNumber(campo1.value);
  var num2 = toNumber(campo2.value);
  var calc = num1 + " " + operador.value + " " + num2
  resultado.textContent = calc + " = " + eval(calc);
}

campo1.addEventListener("input", somenteNumeros);
campo2.addEventListener("input", somenteNumeros);

campo1.addEventListener("input", onInput);
campo2.addEventListener("input", onInput);
operador.addEventListener("input", onInput);

onInput();
#operador {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  -o-appearance: none;
}

select::-ms-expand {
  display: none;
}
<input id="campo1" type="number" />
<select id="operador">
  <option value="+" selected>+</option>
  <option value="-">-</option>
  <option value="*">*</option>
  <option value="/">/</option>
  <option value="%">%</option>
</select>
<input id="campo2" type="number" />
<span id="resultado"></span>

3

Uma alternativa é utilizar um framework que automatize o trabalho para você. O exemplo a seguir é utilizando o AngularJS:

angular
  .module('app', [])
  .controller('SomaController', SomaController);

function SomaController() {
  var vm = this;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="SomaController as vm">
  <input type="number" ng-model="vm.numero1" />

  <input type="number" ng-model="vm.numero2" />
  <br>
  <br>
  <span ng-if="vm.numero1 !== undefined && vm.numero2 !== undefined">A soma dos dois numeros é {{vm.numero1 + vm.numero2}}.</span>
</div>

Como pode-se notar, com uma pequena porção de código já é possível realizar o intercâmbio de informações entre JavaScript e HTML chegando ao resultado desejado.

3

Aqui está um exemplo de soma de 3 inputs, conforme o usuário vai digitando ele já vai calculando total, como mostra o exemplo abaixo:

<div id="qtde_elementos">
    <form action="" method="post">
        <div>
            <label>Valor 1:</label>
            <input data-id="0" class="qtde" type="number" placeholder="0" size="1" maxlength="2" max="10" min="0" step="0">
        </div>
        <div>
            <label>Valor 2:</label>
            <input data-id="1" class="qtde" type="number" placeholder="0" size="1" maxlength="2" max="10" min="0" step="0">
        </div>
        <div>
            <label>Valor 3:</label>
            <input data-id="2" class="qtde" type="number" placeholder="0" size="1" maxlength="2" max="10" min="0" step="0">
        </div>
    </form>
</div>
<div class="total" data-total>Total: <span>R$ 0,00</span>
</div>

O código javaScript é este:

$('[data-id]').change(function () {
    var data = {
        id: $(this).data('id'),
        value: $(this).val()
    }
    $('body').trigger('total.update', [data]);
});

(function () {
    var Total = function (el) {
        this.$el = el;
        this.value = 0;
        this.products = new Array();
        $('body').on('total.update', $.proxy(this, 'update'));
    }
Total.prototype.update = function (e, data) {
    this.products[data.id] = data.value
    this.value = this.products.reduce(this.reduce);
    this.render.apply(this);
}

Total.prototype.reduce = function (prev, current) {
    return parseFloat(current) + parseFloat(prev);
}

Total.prototype.render = function () {
    this.$el.find('span').html(currencyFormatted(parseFloat(this.value), 'R$'));
}

$(document).ready(function () {
    $el = $('[data-total]');
    var instance = $el.data('total-instance') || new Total($el);
    $el.data('total-instance', instance);
});
})();

function currencyFormatted(value, str_cifrao) {
    return str_cifrao + ' ' + value.formatMoney(2, ',', '.');
}

Number.prototype.formatMoney = function (c, d, t) {
    var n = this,
        c = isNaN(c = Math.abs(c)) ? 2 : c,
        d = d == undefined ? "." : d,
        t = t == undefined ? "," : t,
        s = n < 0 ? "-" : "",
        i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "",
        j = (j = i.length) > 3 ? j % 3 : 0;
    return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?  =\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
  };
1
  • 1
    O AP não inseriu a tag jQuery, então talvez ele queira usar javascript puro..
    – Franchesco
    Commented 18/09/2015 às 17:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .