jQuery – Calcular produtos/valores do formulário

E ae?
Vamos ver um exemplo simples de como calcular automaticamente o valor total dos itens em um formulário.
A idéia: O cálculo é realizado em tempo real conforme o usuário informa a quantidade de determinados itens, cada item/produto terá o valor em um índice do array no PHP.
Em princípio, o array possui valores fixos, no entanto, partimos da idéia de que esse array seja resultante de uma consulta no banco.

Utilizaremos jQuery e PHP para realizar o cálculo.

Vamos começar pelo bom e velho HTML contendo o formulário com os supostos códigos dos produtos.

<form name="produto" id="produto">
<label>Produto 1:</label>
<input type="text" name="produto_1" id="produto_1" />

<label>Produto 2:</label>
<input type="text" name="produto_2" id="produto_2" />

<label>Produto 3:</label>
<input type="text" name="produto_3" id="produto_3" />

<label>Produto 4:</label>
<input type="text" name="produto_4" id="produto_4" />

<label>Produto 5:</label>
<input type="text" name="produto_5" id="produto_5" />

<label>Produto N:</label>
<input type="text" name="produto_n" id="produto_n" />

<label>Valor Total:</label>
<span id="total"></span>
<input type="hidden" name="total_compra" id="total_compra" />
</form>

Perceba que o elementos possuem NAME e ID com os supostos nomes ou códigos dos produtos, o negócio está aí!
Os nomes utilizados em name e id devem corresponder aos indíces do array que veremos a seguir.
Temos também um campo hidden que armazena o valor total para utilizarmos ao submetermos o formulário.

Vamos ver agora como monitorar os campos com o método .bind() do jQuery e enviar ao PHP os valores contidos em cada campo do formulário.
Chamei o arquivo Javascript de calculo.js, vejamos:

$(document).ready(function(){
// monitorando o evento change dos campos
$('#produto input').bind('change',function(){
// enviando os valores atuais dos campos ao PHP
$.post('calculo.php',{
// serializando o formulario
dataForm: $("#produto").serialize()
},
function(data){
// obtendo o retorno do PHP / atualizando o valor
$('#total').html(data)
// informando o total ao campo hidden
// sera utilizado ao submeter o form
$('#total_compra').val(data)
})
})

// realiza o calculo no inicio ou após um refresh
$.post('calculo.php',{
dataForm: $("#produto").serialize()
},
function(data){
$('#total').html(data)
$('#total_compra').val(data)
})
})

Acredito que os comentários no código bastam, mas…

O evento $(document).ready(function(){ //code }) é como o velho window.onload, ou seja, irá realizar os precidementos contidos dentro do block ao carregar o documento.
Dentro desse bloco nós utilizamos o $(‘#produto input’).bind(‘change’,function(){ //code }) para monitorar o evento change dos campos, ou seja, a cada vez que o campo tiver seu valor alterado as ações contidas no monitoramente serão realizadas, nesse caso a ação é realizada por:
$.post(‘calculo.php’,{//post vars },function(data){ //code })

Esse cara, o $.post é quem envia por post os dados para o PHP, passamos à ele a var dataForm contendo os dados serializados do formulário através de $(“#produto”).serialize(), esse pega todos os valores dos campos existentes no formulário de ID produto e serializa passando à var dataForm que por sua vez é enviada ao PHP.
Sei que ficou um pouco redundante mas as vezes a redundancia fixa o raciocínio (nem acredito que eu disse isso, mas também olha a hora).

Após enviar os dados via post o retorno é armazenado na var data que está em function(data) e esse valor nada mais é que o cálculo dos campos retornados do PHP, apenas isso.

E porque aparecem 2 vezes o bloco abaixo?

$.post('calculo.php',{
dataForm: $("#produto").serialize()},
function(data){
$('#total').html(data)
$('#total_compra').val(data)
})

Eu explico, claro!

Acontece que o primeiro bloco está dentro do .bind() e irá acontecer apenas se algum campo tiver seu valor alterado.
O segundo ocorre na inicialização para realizar o primeiro cálculo que retornará 0(zero), mas isso também está aí porque se o usuário der um refresh na tela depois de ter alterado algum campo o valor que aparece no total irá desaparecer, isso porque o valor está em um elemento span, no entanto o mesmo valor está contido em um campo oculto, campo do tipo hidden que deve ser utilizado para recuperar o valor total dos itens ao submetermos o formulário.

Quando ocorre o $(‘#total’).html(data) o valor está sendo passado ao elemento span apenas para visualização do usuário, não poderia ser um campo input text para que o usuário não alterasse o valor total.  :0

No entanto, após setar o valor do elemento span é chamado também o $(‘#total_compra’).val(data) que guarda o valor no campo oculto.

Tá legal, vamos ver como o cálculo realmente é feito, até agora só vimos como enviar e recuperar o valor mas como é realizada a soma, ainda não.
E chegou a vez do PHP mostrar sua arte também, ué!

Chamei o arquivo PHP de calculo.php

<?php
// Indices e valores dos produtos
$valor = array(
'produto_1' => 20,
'produto_2' => 10.50,
'produto_3' => 15,
'produto_4' => 30,
'produto_5' => 20,
'produto_n' => 2.50
);
// valor total inicial = 0
$total = 0;
// passando os dados do form para um array
$params = array();
parse_str($_POST['dataForm'], $params);
// calculando o valor dos produtos e somando ao total
foreach($params as $item => $value)
{
if(isset($valor[$item]) && !empty($item))
$total += $valor[$item] * $value;
}
// retornando o total calculado e formatado BRL
echo number_format($total,2, ',', '.');
?>

Como está comentado no código, o array de nome $valor contém em seus índices os códigos dos itens (que devem ser iguais ao do formulário para que ocorra o cálculo correto) e também os valores dos mesmos.
Seria assim:
o produto_1 custa 20 rúpias.

Importante: os valores devem ser separados por ponto(.) e não vírgula(,) para que o cálculo ocorre corretamente, não se esqueça disso para não ficar sofrendo aí.
obs: E eu escrevo como se alguém fosse utilizar mesmo o código kas kas kas kas.

Enfim,

A linha parse_str($_POST['dataForm'], $params); passa para um array os valores recebidos do jQuery através do dataForm: $(“#produto”).serialize(), lembra né? blz!
Após passar para o array $params realizamos a verificação if(isset($valor[$item]) && !empty($item)), ou seja, verificamos se existe no array $valor o índice contido em $params.
No foreach nos percorremos todos os índices de $params que nada mais é que os campos do form e verificamos se existe aquele índice no array $valor.
Para fixar a idéia:
$param são os campos do formulário e $valor é o array que contém os índices de mesmo nome que os campos do form, então:
$params['produto_1'] = valor['produto_1']

E a partir disso vamos somando/multiplicando ao $total como a linha:
$total += $valor[$item] * $value;

Essa linha diz o seguinte:
$total += $valor['produto_1'] * $quantidade_digitada_no_produto_1

O echo retorna o jQuery o total calculado, no jQuery é retornado esse valor em function(data), lembra né? blz!
Obs: o valor só atualizado quando o campo é alterado e isso implica em você “sair” daquele campo, mudar de o focu do cursor!

Bom, fica aí a demo para você curtir: demo   |  fontes

Links:
jQuery $.post
PHP  parse_str
PHP numer_format

Abraços e até logo++,