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)
 
 
REVIEW
- First look: Apple Watch

- 10 Amazing Tools You Should Be Using with Dropbox
VIDEO TUTORIAL
- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 1)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 2)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (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
- Exchange 2007: How Do I Modify a Database Size Limit?
- Windows 7 : Enhancing Your Browsing Security (part 1) - Blocking Pop-Up Windows
- Enable the Global Audit Policy by Using the Command Line
- Windows Phone 7 : Updating Your Phone Software
- SOA with .NET and Windows Azure : WCF Discovery (part 1) - Discovery Modes
- Microsoft ASP.NET 3.5 : WCF Services for ASP.NET AJAX Applications
- Securing Windows 7 : Thwarting Snoops and Crackers (part 2) - Locking Your Computer Manually, Automatically
- Windows 7 : Accessing a Shared Printer
- SQL Server 2008 : Data Encryption - SQL Server Key Management
- Windows 7 : Firing Up the Registry Editor