jQuery 1.3 : Working with numeric form data (part 1) - Shopping cart table structure

12/19/2010 3:56:05 PM
We've now looked at several form features that apply to textual inputs from the user. Often, though, our forms are primarily numeric in content. There are several more form enhancements we can make when we are dealing with numbers as form values.

In our bookstore site, a prime candidate for a numeric form is the shopping cart. We need to allow the user to update quantities of items being purchased, and we also need to present numeric data back to the user for prices and totals.

Shopping cart table structure

The HTML for the shopping cart will describe one of the more involved table structures we have seen so far:

<form action="checkout.php" method="post">
<table id="cart">
<th class="item">Item</th>
<th class="quantity">Quantity</th>
<th class="price">Price</th>
<th class="cost">Total</th>
<tr class="subtotal">
<td class="item">Subtotal</td>
<td class="quantity"></td>
<td class="price"></td>
<td class="cost">$152.95</td>
<tr class="tax">
<td class="item">Tax</td>
<td class="quantity"></td>
<td class="price">6%</td>
<td class="cost">$9.18</td>
<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 class="total">
<td class="item">Total</td>
<td class="quantity"></td>
<td class="price"></td>
<td class="cost">$172.13</td>
<tr class="actions">
<input type="button" name="recalculate"
value="Recalculate" id="recalculate" />
<input type="submit" name="submit"
value="Place Order" id="submit" />
<td class="item">
Building Telephony Systems With Asterisk
<td class="quantity">
<input type="text" name="quantity-2" value="1"
id="quantity-2" maxlength="3" />
<td class="price">$26.99</td>
<td class="cost">$26.99</td>
<td class="item">
Smarty PHP Template Programming and Applications
<td class="quantity">
<input type="text" name="quantity-1" value="2"
id="quantity-1" maxlength="3" />
numeric form data, working withshopping cart, table structure<td class="price">$35.99</td>
<td class="cost">$71.98</td>
<td class="item">
Creating your MySQL Database
<td class="quantity">
<input type="text" name="quantity-3" value="1"
id="quantity-3" maxlength="3" />
<td class="price">$17.99</td>
<td class="cost">$17.99</td>
<td class="item">
Drupal: Creating Blogs, Forums, Portals, and
Community Websites
<td class="quantity">
<input type="text" name="quantity-4" value="1"
id="quantity-4" maxlength="3" />
<td class="price">$35.99</td>
<td class="cost">$35.99</td>

This table introduces another element rarely seen in the wild, <tfoot>. Like <thead>, this element groups a set of table rows. Note that though the element comes before the table body, it is presented after the body when the page is rendered:

This source code ordering, while non-intuitive to designers thinking visually about the table rendering, is useful to those with visual impairments. When the table is read aloud by assistive devices, the footer is read before the potentially long content, allowing the user to get a summary of what is to come.

We've also placed a class on each cell of the table, identifying which column of the table contains that cell. We demonstrated some ways to find cells in a column by looking at the index of the cell within its row. Here, we'll make a tradeoff and allow the JavaScript code to be simpler by making the HTML source a bit more complex. With a class identifying the column of each cell, our selectors can become a bit more straightforward.

Before we proceed with manipulating the form fields, we will apply a standard line of row striping code to spruce up the table's appearance:

$(document).ready(function() {
$('#cart tbody tr:nth-child(even)').addClass('alt');

Once again, we make sure to only select rows to color if they are in the body of the table:

Other -----------------
- The Art of SEO : Controlling Content with Cookies and Session IDs
- iPad SDK : New Graphics Functionality - We Are All Tool Users (part 5) - The Freehand Tool
- iPad SDK : New Graphics Functionality - We Are All Tool Users (part 4) - The Ellipse and Rectangle Tools
- iPad SDK : New Graphics Functionality - We Are All Tool Users (part 3) - The Line Tool
- iPad SDK : New Graphics Functionality - We Are All Tool Users (part 2) - The Pencil Tool
- iPad SDK : New Graphics Functionality - We Are All Tool Users (part 1)
- Security-As-a-[Cloud] Service : Today’s Offerings
- CSS for Mobile Browsers : CSS Sprites
- CSS for Mobile Browsers : Common Patterns (part 4)
- CSS for Mobile Browsers : Common Patterns (part 3) - Titles and Pseudoclasses
- CSS for Mobile Browsers : Common Patterns (part 2) - Rounded corners
- CSS for Mobile Browsers : Common Patterns (part 1) - Absolute and floating positions
- iPad SDK : New Graphics Functionality - The Basic Drawing Architecture
- jQuery 1.3 : Compact forms (part 6)
- jQuery 1.3 : Compact forms (part 5)
- jQuery 1.3 : Compact forms (part 4)
- jQuery 1.3 : Compact forms (part 3)
- jQuery 1.3 : Compact forms (part 2) - AJAX auto-completion
- jQuery 1.3 : Compact forms (part 1) - Placeholder text for fields
- The Art of SEO : Duplicate Content Issues (part 3)
Popular tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS
Most View
- Windows Phone 7 : Finding Yourself
- SQL Server 2008 Scheduling and Notification : Managing Alerts
- Microsoft Exchange Server 2003: Configuring Recipient Objects (part 6) - Configuring Mailbox Permissions
- .NET Debugging : Introduction to the Tools - .NET 2.0—Redistributable & .NET 2.0—SDK
- Handling Input on Windows Phone 7 : The Keyboard
- SharePoint 2010 : Choose a Column Type (part 10) - Term Set Settings
- Engaging the SAP Solution Stack Vendors : General Sizing Best Practices and Approaches
- Exchange Server 2007 : Manage Resource Mailboxes
- SharePoint 2010 : Use the Advanced Search (in SharePoint Server)
- Configuring BitLocker Drive Encryption on a Windows Server 2008 R2 Branch Office Domain Controller (part 4)