jQuery Mobile: Up and Running

Chapter 5. Form Components

The jQuery Mobile framework supports standard web forms with automatic AJAX handling on compatible devices and with touch-optimized rendering for standard form controls. That’s the first good news about form controls.

When I say standard web form I’m talking about a group of form controls—such as input, textarea, and select elements—inside a form element with an action attribute defined as the URL that will receive the form’s data.

Form Action

Any form action will be handled as we expect. That is, the form will be submitted when the user presses a submit button or when the user presses the Enter key. Did I say Enter key on a mobile device?

We are going to target different devices with different input handling. Some of them will have physical keyboards (maybe with an Enter key); some others will only have a virtual onscreen keyboard. Devices with a virtual keyboards usually have a “send,” “submit,” or similar button on the keyboard that acts as the submit button while the user is entering form data.

When the form is submitted, jQuery Mobile will use an AJAX transition to the submission page similar to a link to an external page, unless the form is submitted to another domain. The form can use get or post defined in the action attribute of the form element.

A typical jQuery Mobile form will look very similar to a typical web form:

<form action="send.php" action="get">

</form>

A jQuery Mobile form needs a jQuery Mobile document on the results page, similar to an ...