JavaScript & jQuery: The Missing Manual, 3rd Edition

Chapter 10. Forms Revisited

Forms are the original interactive web element, and they’re a part of most web applications in one form or another. Forms can get input from visitors, let shoppers buy goods, let community members post their thoughts, and so on. Chapter 8 looked at ways to make web forms smarter and easier to use. jQuery UI lets you do even more with your forms and provides a consistent design to make your form elements look and function in similar ways.

This chapter will show you how to use four jQuery UI widgets—Datepicker, Autocomplete, Selectmenu, and Button—that can really make your forms look great and work well.

Picking Dates with Style

Many forms require date input. Forms for adding an event to a calendar, booking a plane flight, and making a dinner reservation all require you to specify a date for an activity. Many forms provide instructions, like “Type a date, like 12/10/2014,” but simply asking visitors to type a date into a field can generate a wide variety of results. First of all, you’re relying on your visitors never to make typos. In addition, because people often write dates in different ways (in the United States, for example, dates are specified in the order month, day, year, but many other places the order is day, month, year), hand-typed dates may be misleading or inaccurate.

Fortunately, jQuery UI’s Datepicker widget makes selecting a date straightforward. Instead of typing a date, visitors just click a form field, and then use a visual calendar to pick ...