Cálculo - Somando o valor de dois inputs

Conforme citei em um artigo anterior, mostrarei aqui como pegar o valor de dois inputs para cálculo de média. Mostrarei em um terceiro input o resultado da média.

A primeira a coisa a se fazer é criar um formulário com três inputs e um botão. No terceiro input, que irá mostrar apenas o resultado, podemos colocar o atributo “readonly”.


<form name="calculo" method="post" action="">
<p>
<input type="text" name="nota1" value="" />
</p>
<p>
<input type="text" name="nota2" value="" />
</p>
<p>
<input type="text" name="media" readonly="readonly" value="" />
</p>
<p>
<button>Calcular</button>
</p>
</form>

Após criar o HTML, precisamos apenas do código jquery para manipular os dados do formulário. Não farei validação de campos e muito menos formatação, pois este exemplo serve apenas para mostrar como pegar dados de campos de formulário e devolver em outro campo o resultado final.

Vamos ao jquery:

$(document).ready(function(){

 $("button").click(function(){

 //declaração das variáveis
 var nota1 = 0,nota2 = 0,media = 0;

 //pegando as notas dos campos inputs
 nota1 = parseInt($("input[name=nota1]").val());
 nota2 = parseInt($("input[name=nota2]").val());
 //formula para cálculo de média
 media = (nota1 + nota2) / 2;
 
 //mostra o resultado no input name=media
 $("input[name=media]").val(media);

 return false;
 });
 });

Veja o post Pegando o valor do input, que foi o post anterior a este.
Veja também um exemplo funcionando deste script: calculo de média.


Comentários

Francisco F. | 11/03/2016 11:30:58

Fala galerinha,
Fiz algumas alterações no código conforme minha necessidade, mas a base é isso ai mesmo. Muito bem explicado. Para quem quer alteração sem o click, defina os campos como input e altere "$("button").click(function(){" para:

$("input").change(function(){

Deve funcionar.

RODRIGO NUNES | 13/11/2014 19:51:43

como fazer para calcular media e aparecer automaticamente no campo de resposta sem o boto

Josean Matias:

Olá Rodrigo, seguindo este artigo para obter a média poderia somar os valores e depois dividir por 2 (número de inputs).

isa | 23/03/2012 17:22:31
tem como fazer isso aih automatico, sem o botao? queria que quando digitasse os 2 campos ele jah fizesse a media sozinho
Josean Matias:

Olá Isa, tem possibilidade sim. Leia sobre o evento .blur() do jquery ou onblur() do javascript.

Comentar