Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17663
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Script soma de campos com total jQuery

17-02-2011 22:25

Esse script é estilo carrinho de compras, onde você pode aumentar ou diminuir a quantidade de produtos através de um input, ao alterar a quantidade, é mostrado automaticamente no campo total o total da compra.

Para usar esse script, basta ter o jquery.js na sua pasta, e usar esse script

<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="http://www.pengoworks.com/workshop/jquery/calculation/jquery.calculation.js"></script> <script type="text/javascript"> $(document).ready(function(){ // bind the recalc function to the quantity fields $("input[name^=qty_item_]").bind("keyup", recalc); // run the calculation function now recalc(); function recalc(){ $("[id^=total_item]").calc( // the equation to use for the calculation "qty * price", // define the variables used in the equation, these can be a jQuery object { qty: $("input[name^=qty_item_]"), price: $("[id^=price_item_]") }, // define the formatting callback, the results of the calculation are passed to this function function (s){ // return the number as a dollar amount return "$" + s.toFixed(2); }, // define the finish callback, this runs after the calculation has been complete function ($this){ // sum the total of the $("[id^=total_item]") selector var sum = $this.sum(); $("#grandTotal").text( // round the results to 2 digits "$" + sum.toFixed(2) ); } ); } }); </script>


<form name="form"> <table width="500"> <col style="width: 50px;" /> <col /> <col style="width: 60px;" /> <col style="width: 110px;" /> <tr> <th> Qty </th> <th align="left"> Product </th> <th> Price </th> <th> Total </th> </tr> <tr> <td align="center"> <input type="text" name="qty_item_1" id="qty_item_1" value="0" size="2" /> </td> <td> <a href="http://www.packtpub.com/jQuery/book">Learning jQuery</a> </td> <td align="center" id="price_item_1"> $39.99 </td> <td align="center" id="total_item_1"> $39.99 </td> </tr> <tr> <td align="center"> <input type="text" name="qty_item_2" id="qty_item_2" value="0" size="2" /> </td> <td> <a href="http://jquery.com/">jQuery Donation</a> </td> <td align="center" id="price_item_2"> $14.99 </td> <td align="center" id="total_item_2"> $14.99 </td> </tr> <tr> <td colspan="3" align="right"> <strong>Grand Total:</strong> </td> <td align="center" id="grandTotal"> </td> </tr> </table>

A referência para esse plugin chamado jQuery Calculation você encontra abaixo
http://www.pengoworks.com/workshop/jque ... plugin.htm
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Google Adsense [Bot]