Adding Forms - Exercise

Welcome to our free jQuery Mobile tutorial. This tutorial is based on Webucator's jQuery Mobile course.

Contact Us or call 1-877-932-8228
Adding Forms - Exercise

Adding Forms

Duration: 20 to 30 minutes.

In this exercise, you will add a checkout form to the Nan & Bob's site.

  1. Open WidgetsUI/Exercises/forms.html in a file editor.
  2. Add sample text to the top of the #checkout page ("Your Order: 2 items, $10.50") - the form won't, of course, actually be totaling real items.
  3. Add an open and close form tag to the #checkout page. Add an attribute data-ajax="false" to the form tag, to prevent the form from being sent via Ajax. Why? Because we display all pages (each as a div with data-role="page") in our site in one file, we need to submit the form without Ajax to ensure that the thank-you page shows after the user submits the form.
  4. Within the form tag, add fields for the following data; use appropriate field types, including new HTML5 form controls:
    • First and last name.
    • Shipping address.
    • Email.
    • Date of birth.
    • Shipping option (standard, expedited, etc.).
    • Rate our service (on scale of 0=low, 10=high).
    • How did you hear of us? (web, newspaper, other).
    • Additional notes.
  5. Create a "thank-you page" with an appropriate thank-you message; use this page as the target of the checkout form.
  6. Test your work in a mobile browser; the results should look like this: Forms exercise

Solution:

WidgetsUI/Solutions/forms.html

Code Explanation:

Adding the form tag with attribute data-ajax="false" allows us to submit the form without using Ajax - and thus to submit the form to the #thanks page.

We add appropriate fields for each piece of submitted information:

  • An input type="text" for the first and last names.
  • A textarea for the shipping address and notes.
  • Inputs of type email and date for the email and date-of-birth fields, respectively.
  • A select for the shipping options.
  • A slider for the rate-our-service field.
  • Checkboxes for "how did you hear of us?".
Next

This tutorial is based on Webucator's jQuery Mobile Course. We also offer many other Mobile Web Training courses. Sign up today to get help from a live instructor.