Programming4us
         
 
 
Programming

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">
<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>
numeric form data, working withshopping cart, table structure<td class="price">$35.99</td>
<td class="cost">$71.98</td>
</tr>
<tr>
<td class="item">
Creating your MySQL Database
</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>


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)
 
 
Most View
- Security Management in the Cloud
- Windows Phone 7 Game Development : Orthographic Projection (part 1) - The Viewing Frustum & Defining the Orthographic Viewing Frustum in XNA
- SQL Azure : Creating Databases, Logins, and Users (part 1)
- Windows 7 : Controlling and Customizing Your Website (part 1)
- Microsoft ASP.NET 3.5 : Web Services for ASP.NET AJAX Applications (part 1) - Remote Calls via Web Services
- Visual Basic 2010 : Deploying Applications with ClickOnce - Registration-Free COM
- Programming Excel with VBA and .NET : Procedures - Arguments and Results
- Configuring Internet Information Services (part 6) - Migrating From IIS 6.0
- Install Exchange 2007 : Perform a Typical Installation of Roles
- Windows 7 : Configuring Hardware (part 1) - Device Stage & Using Device Manager
Top 10
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 3) - Configuring Recipient Filtering
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 2)
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 1)
- Implementing Edge Services for an Exchange Server 2007 Environment : Installing and Configuring the Edge Transport Server Components
- What's New in SharePoint 2013 (part 7) - BCS
- What's New in SharePoint 2013 (part 6) - SEARCH
- What's New in SharePoint 2013 (part 6) - WEB CONTENT MANAGEMENT
- What's New in SharePoint 2013 (part 5) - ENTERPRISE CONTENT MANAGEMENT
- What's New in SharePoint 2013 (part 4) - WORKFLOWS
- What's New in SharePoint 2013 (part 3) - REMOTE EVENTS