calcular campos sem refresh

Enviada por Luiz Henrique 
Luiz Henrique
calcular campos sem refresh
16 de November de 2011 às 01:58PM
pessoal estou precisando de uma ajuda estou criando um formulario onde ira listar os produtos do banco e trazendo um input para cada um ficando assim

nome | m2 | valor m2 | total:
p1 2 3 3

preciso que ao preencher os campo ja multiplique dinamicamente o campo total sem dar refresh, assim que preencher o campo ele ja calcule m2 * valor m2 mostrando o resultado no campo total.
Não tenho nem ideia de como fazer isso em jquery.
Marcos Regis
Re: calcular campos sem refresh
16 de November de 2011 às 04:40PM
Olhe na documentação do jQuery a função getJSON. Tem um exemplo de como fazer usando inclusive um script PHP.
Luiz Henrique
Re: calcular campos sem refresh
17 de November de 2011 às 04:38AM
Brigado vou dar uma olhada
Luiz Henrique
Re: calcular campos sem refresh
17 de November de 2011 às 07:01AM
Andei vendo Getjson mas não entendi como fazer achei este exemplo que é bem o que preciso
mas como posso fazer para os dados do var buscar o id dos campos que estão vindo do banco?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Php + Ajax + jQuery</title>
<script type="text/javascript" src="jquery.min.js"></script>

</head>
<body>


<form id="soma_algarismos" action="calculo.php" method="post" >

<label for="primeiro_algarismo">1º Número:</label></p>
<input id="primeiro_algarismo" name="primeiro_algarismo" class="numeros"/>
<br>
<label for="segundo_algarismo">2º Número:</label></p>
<input id="segundo_algarismo" name="segundo_algarismo" class="numeros" /><br>

<br />

</form>
<br>


<div id="resultado" style="background:lightgreen; height:20px;width:500px;">
</div>

<script type="text/javascript">
$(".numeros").keyup(function(){

var primeiro_algarismo = $("input#primeiro_algarismo").val();

var segundo_algarismo = $("input#segundo_algarismo").val();

var data = "primeiro_algarismo="+primeiro_algarismo+"&segundo_algarismo="+segundo_algarismo;

$.ajax({
type: "POST",
url: "calculo.php",
data: data,
dataType: 'html',
success: function(response) {
$('#resultado').html(response);
}

});


return false;
});

</script>
</body>
</html>
Você precisa estar logado no PHPBrasil.com para poder enviar mensagens para os nossos fóruns.

Faça o login aqui.