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
Olá Rodrigo, seguindo este artigo para obter a média poderia somar os valores e depois dividir por 2 (número de inputs).
Olá Isa, tem possibilidade sim. Leia sobre o evento .blur() do jquery ou onblur() do javascript.
Comentar