Operação Matemática em Campo Input

maxwell2 · Julho 28, 2010

Amigos, bom dia.

Vocês poderiam me auxiliar a montar um formulario com um calculo matematico?

O que eu tenho é o seguinte:

<input type=text name=valor1>
<input type=text name=valor2>
<input type=text name=valor1-valor2>

Ou seja o que for digitado no campo valor1 e valor2, terão o resultado no campo "valor1-valor2" ,

no caso seria uma subtração.

Pesquisando na net, eu consegui montar esse formulario mas o resultado so é exposto quando clico no botão enviar.

O que eu queria seria algo automatico, onde o resultado é preenchido no momento em que os campos recebem os digitos, isso é possivel? Podem me dar uma dica de por onde começo?

Editado Julho 28, 2010 por Jonathan Queiroz

fercosmig · Julho 28, 2010

em exemplo mais ou menos ae

function calcula(){
    valor1 = document.getElementById('vl1').value;
    valor2 = document.getElementById('vl2').value;
    resultado = document.getElementById('vl3');
    resultado.value = parseFloat(valor1) - parseFloat(valor2);
}

<input type="text" id="vl1" name="valor1" value="0" onClick="this.value='';" onBlur="java script: calcula();" />
<input type="text" id="vl2" name="valor2" value="0" onClick="this.value='';" onBlur="java script: calcula();" />
<input type="text" id="vl3" name="valor1-valor2" value="0" readonly="readonly" />

maxwell2 · Julho 28, 2010

Oi, tentei usar seu exemplo dentro de <script>, mas o resultado no campo "valor1-valor2" foi sempre 0. É preciso colocar algum codigo dentro da tag <body> ou <form>?

fercosmig · Julho 28, 2010

código completo do exemplo (1º parte dentro de da tag script 2ª parte dentro da tag body):

<html>
<head>
<title>Untitled</title>

<script language="javascript" type="text/javascript">
<!--//
function calcula(){
    valor1 = document.getElementById('vl1').value;
    valor2 = document.getElementById('vl2').value;
    resultado = document.getElementById('vl3');
    resultado.value = parseFloat(valor1) - parseFloat(valor2);
}
//-->
</script>

</head>
<body>

<input type="text" id="vl1" name="valor1" value="0" onClick="this.value='';" onBlur="java script: calcula();" />
<input type="text" id="vl2" name="valor2" value="0" onClick="this.value='';" onBlur="java script: calcula();" />
<input type="text" id="vl3" name="valor1-valor2" value="0" readonly="readonly" />

</body>
</html>

maxwell2 · Julho 29, 2010

Fercosmig fiz como você mensionou mas mesmo assim o calculo ainda não é feito, esta faltando alguma coisa?

Douglas Nogueira · Julho 29, 2010

Cara,

O código do fercosmig ta certo, o calculo somente será executado quando você tirar o foco do botão(clicar em outro lugar na página ou mudar de campo), o que você tem que se atentar é que o forum pra questões de segurança separam as funções javascript, como você pode ver no código do fercosmig a parte que chama a função está assim onBlur="java script: calcula();" quando deveria estar assim onBlur="java script:calcula();" sem espaço no meio de javascript e sem espaço depois dos dois pontos.

Att Douglas

Entrar

Operação Matemática em Campo Input

Pergunta

maxwell2

Link para o comentário

Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

fercosmig

Link para o comentário

Compartilhar em outros sites

maxwell2

Link para o comentário

Compartilhar em outros sites

fercosmig

Link para o comentário

Compartilhar em outros sites

maxwell2

Link para o comentário

Compartilhar em outros sites

Douglas Nogueira

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades