jQuery Cookbook

Chapter 11. HTML Form Enhancements with Plugins

Jörn Zaefferer

Introduction

Forms are a very common interaction for users of web applications; improving this interaction improves the business of the application.

jQuery and various plugins offer out-of-the-box and customizable solutions for better interactions, with progressive enhancement at heart.

Each problem could be solved with a jQuery solution from scratch, but using a plugin yields a lot of benefits:

• Avoids reinventing the wheel

• Provides functionality that is well tested among different browsers

• Saves a lot of work that hides in the details

• Provides functionality that is tuned to work under extreme conditions

Each recipe will discuss the strengths and weaknesses of the plugin, highlighting where it may make sense to start from scratch instead.

Basic Approach

The basic approach to using jQuery plugins is always the same. First you include jQuery itself, and then you include the plugin file on your page. Some plugins also need a stylesheet. Most plugins require some markup to work with and a line of code that selects this markup element and does something with it. Because of common naming conventions, a plugin “slideshow” would be used like this:

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="jquery.slideshow.css"/> <script src="assets/jquery-latest.js"></script> <script src="assets/jquery.slideshow.js"></script> <script type="text/javascript"> jQuery(document).ready(function($){ $("#slideshow").slideshow(); }); </script> </head> ...