Ajax Hacks

Chapter 2. Web Forms

Hacks 12–21

Almost everyone who has used the Web has encountered an HTML form. When users buy books or DVDs online, or log into discussion lists or other web communities, inevitably they are typing information into text fields or choosing options in select lists, and then submitting the forms by clicking a button. The purpose of these forms is to upload user- or client-related data to a server component, which then implements a task such as logging the user into an application.

Web applications that use Ajax-related techniques, however, can provide a different mechanism for submitting web-form information. JavaScript code can submit discrete values from only certain widgets or fields, for instance, without requiring the user to click the classic Submit button. This application model has transformed the web form into a “rich user interface” similar to a desktop application, where the code can send data over the network in response to click or blur events without refreshing the entire web page. The following hacks illustrate how to send selection and text-field values using XMLHttpRequest, and how to dynamically generate the content of display widgets from server data.

Submit Text Field or textarea Values to the Server Without a Browser Refresh

Create a smooth transition between entering information into a textarea or text field and instantly transferring the data to the server.

Ajax applications can automatically send to a server program the information that the ...