jquery学习笔记-购物车表单简单实现

来源：互联网发布：mac用户文件夹改名编辑：程序博客网时间：2024/06/03 04:03

<span style="font-family: Arial, Helvetica, sans-serif;">购物车主html代码：</span>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>购物车表单</title><script type="text/javascript" src="jquery-1.11.0.js"></script><script src="shoppingCar.js" type="text/javascript"></script><style>.even{background-color:#996;}.odd{background-color:#9CC;}.clickable{cursor:pointer;}</style></head><body><form action="checkout.php" method="post">  <table id="cart">    <thead>      <tr>        <th class="item">Item</th>        <th class="quantity">Quantity</th>        <th class="price">Price</th>        <th class="cost">Total</th>      </tr>    </thead>    <tfoot>      <tr class="subtotal">        <td class="item">Subtotal</td>        <td class="quantity"></td>        <td class="price"></td>        <td class="cost">$152.95</td>      </tr>      <tr class="tax">        <td class="item">Tax</td>        <td class="quantity"></td>        <td class="price">6%</td>        <td class="cost">$9.18</td>      </tr>      <tr class="shipping">        <td class="item">Shipping</td>        <td class="quantity">5</td>        <td class="price">$2 per item</td>        <td class="cost">$10.00</td>      </tr>      <tr class="total">        <td class="item">Total</td>        <td class="quantity"></td>        <td class="price"></td>        <td class="cost">$172.13</td>      </tr>      <tr class="actions">        <td></td>        <td><input type="button" name="recalculate" value="Recalculate" id="recalculate"/></td>        <td></td>        <td><input type="submit" name="submit" value="Place Order" id="submit"/></td>      </tr>    </tfoot>    <tbody>      <tr>        <td class="item">Building Telephony Systems With Asterisk</td>        <td class="quantity"><input type="text" name="quantity-2" value="1" id="quantity-2" maxlength="3"/></td>        <td class="price">$26.99</td>        <td class="cost">$26.99</td>      </tr>      <tr>        <td class="item">Smarty PHP Template Programming and Applications</td>        <td class="quantity"><input type="text" name="quantity-1" value="2" id="quantity-1" maxlength="3"/></td>        <td class="price">$35.99</td>        <td class="cost">$71.98</td>      </tr>      <tr>        <td class="item">Creating your MySQL Database: Practical Design Tips and Techniques</td>        <td class="quantity"><input type="text" name="quantity-3" value="1" id="quantity-3" maxlength="3"/></td>        <td class="price">$17.99</td>        <td class="cost">$17.99</td>      </tr>      <tr>        <td class="item">Drupal: Creating Blogs, Forums, Portals, and Community Websites</td>        <td class="quantity"><input type="text" name="quantity-4" value="1" id="quantity-4" maxlength="3"/></td>        <td class="price">$35.99</td>        <td class="cost">$35.99</td>      </tr>    </tbody>  </table></form><fieldset id="shipping">    <legend>Shipping to:</legend>    <a id="shipping-name" href="http://www.baidu.com">Ford Prefect</a>  </fieldset></body></html>

shipping.js代码：

$(document).ready(function(){var stripe = function(){$('#cart tbody tr:visible:even').removeClass('odd').addClass('even');$('#cart tbody tr:visible:odd').removeClass('even').addClass('odd');};stripe();$('.quantity input').keypress(function(event){if (event.charCode && (event.charCode < 48 || event.charCode > 57)){event.preventDefault();}});$('.quantity input').change(function(){var totalQuantity = 0;var totalCost = 0;$('#cart tbody tr').each(function(){var price = parseFloat($('.price',this).text().replace(/^[^\d.]*/,''));price = isNaN(price) ? 0 : price;var quantity =  parseInt($('.quantity input',this).val());var cost = quantity * price;$('.cost',this).text('$' + cost.toFixed(2));totalQuantity += quantity;totalCost += cost;});$('.shipping .quantity').text(String(totalQuantity));var shippingRate = parseFloat($('.shipping .price').text().replace(/^[^\d.]*/,''));var shipping = totalQuantity * shippingRate;$('.shipping .cost').text('$' + shipping.toFixed(2));totalCost += shipping;$('.subtotal .cost').text('$' + totalCost.toFixed(2));var taxRate = parseFloat($('.tax .price').text()) / 100;var tax = Math.ceil(totalCost * taxRate * 100) / 100;$('.tax .cost').text('$' + tax.toFixed(2));totalCost += tax;$('.total .cost').text('$' + totalCost.toFixed(2));});$('#recalculate').hide();$('<th> </th>').insertAfter('#cart thead th:nth-child(2)');$('#cart tbody tr').each(function(){$deleteButton = $('<img/>').attr({'width':'16','height':'16','src':'images/del.png','alt':'remove from cart','title':'remove from cart','class':'clickable'}).click(function(){$(this).parents('tr').find('.quantity input').val(0).trigger('change')  .end().hide();stripe();});$('<td></td>').insertAfter($('td:nth-child(2)',this))  .append($deleteButton);});$('<td> </td>').insertAfter('#cart tfoot td:nth-child(2)');});$(document).ready(function(){var editShipping = function(){$.get('shipping.php',function(data){$('#shipping-name').remove();$(data).hide().appendTo('#shipping').slideDown();$('#shipping form').submit(saveShipping);});return false;};var saveShipping = function(){var postData = $('#shipping :input').serialize();$.post('shipping.php',postData,function(data){$('#shipping form').remove();$(data).appendTo('#shipping');$('#shipping-name').click(editShipping);});return false;};$('#shipping-name').click(editShipping);});

服务器端代码(shipping.php)：

<?phpif (isset($_POST['firstName'])){print '<a id="shipping-name" href="http://www.baidu.com">Ford Prefect</a>';}else{?><form action="#" method="post">  <label for="firstName">First name:</label>  <input type="text" name="firstName" value="<?php echo $_POST[firstName];?>"/><br/>  <label for="address">Address:</label>  <input type="text" name="address" value="<?php echo $_POST[address];?>"/><br/>  <input type="submit" name="save" value="Save"/></form>    <?php}?>

0 0