Forms

Home Search

Ajax form submission

In jQuery Mobile, form submissions are automatically handled using Ajax whenever possible, creating a smooth transition between the form and the result page. To ensure that your form submits are as intended, be sure to specify action and method properties on your form element. When unspecified, the method will default to get, and the action will default to the current page's relative path (found via $.mobile.path.get())

Forms also accept attributes for transitions just like anchors, such as data-transition="pop" and data-direction="reverse". To submit a form without Ajax, you can either disable Ajax form handling globally, or per form via the data-ajax="false" attribute. The target attribute (as in target="_blank") is respected on forms as well, and will default to the browser's handling of that target when the form submits. Note that unlike anchors, the rel attribute is not allowed on forms.

Default Ajax form example

This demonstrates automated Ajax handling of form submissions. The form below is configured to send a GET request to forms-sample-response.php. On submit, jQuery Mobile will make sure that the Url specified is able to be retrieved via Ajax, and handle it appropriately. Keep in mind that just like ordinary HTTP form submissions, jQuery Mobile allows GET result pages to be bookmarked by updating the URL hash when the response returns successfully. Also like ordinary form submissions, POST requests do not contain query parameters in the hash, so they are not bookmarkable.

Non-Ajax form example

To prevent form submissions from being automatically handled with Ajax, add the data-ajax="false" attribute to the form element. You can also turn off Ajax form handling completely via the ajaxEnabled global config option.

The form below is identical to the one above except for the addition of the data-ajax="false" attribute. When the submit button is pressed, it will result in a full page refresh.

Self-submitting Forms

You can submit forms to the same URL you're currently viewing by setting the form's action attribute to that URL, as demonstrated on this page.

When a POST request is submitted to a page that's already in the DOM (which would commonly happen when submitting a form to the same URL currently in view), the response URL will be identical to that existing page, as POST requests do not append query string parameters to the URL. In this situation, jQuery Mobile will replace the page that submitted the form with the page returned in the response body.