jQueryMobile Forms Part 1 The Basics

Anthony James —  June 15, 2011

In this screencast you will learn how to use jQuery Mobile forms, and how it interacts with ajax in the jQuery Mobile framework. This screencast is an introduction to forms which covers all the basics and will get you up to spend and using forms quickly.

Download Source Working Example


Anthony James

Posts Twitter Facebook

Anthony is a Web Software Developer & Linux Systems Engineer. With 11 years of experience in these fields. He is also the founder and main contributor at Pinehead.tv. He is passionate about passing on his technical knowledge through training and educating others.

12 responses to jQueryMobile Forms Part 1 The Basics

  1. Hi Anthony this is a great screencast. I have two queries i think you can help me.
    1. Which IDE you are using? Its looking great. But i have seen that your IDE is not giving intelligence about jquery specific properties like data-transition.
    2. currently jquery mobile is not even in beta phase. So is it ok to start development with jquery mobile?
    3. Which option is preferable for adding jquery mobile library.
    a. adding a local copy of jquery mobile
    b. adding the url like “http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css”.

  2. Thanks for the Post! I’ll be glad to answer your questions

    1.) I’m using coda, I use it because I prefer the layout/usage with SFTP connection to my server. The interface is just nice to me.
    2.) Obviously in alpha/beta phases you might have some issues. However, during my development – to production items I’ve used in actual projects I find it to be a very stable easy to use platform. I believe the alpha means more “limited features” then features in testing. Especially now that most of the testing comes from GIT before alpha releases.
    3.) This depends on what your project calls for. For simple projects which do not require customization of templates ETC I like to use the CDN to make it light weight on my server. However, I do have a project where I edited the core files. When I do this, I host them on my box. So a) when I need customization b) when I don’t have to edit any jquery mobile files.

    Let me know if I can answer any more questions for you!

  3. The “working” example does not work.
    Neither does my version following your instructions.
    If I look at the javeconsole in Chrome I see “TypeError: Cannon call method _trigger of undefined”.
    Any suggestions?

  4. hi

    when i go to the working example, at the result.php. it seems you have and error:

    Parse error: syntax error, unexpected $end in /content/sites/pinehead/www/tuts/jqmobile/forms/result.php on line 31

    maybe you dont change the code when you edited for the chrome debbuging.

    cheers

  5. Hi,

    Thanks for the tutorial.

    Instead of posting form data to a server I would like to save to (HTML5) localstorage. How could I do that?

    Also would be interested in packaging up as a web app for Android phones. Can you do something on that?

  6. Hi Anthony.
    I’m writing an app which uses jquerymobile and websql. It is a tablet app and a local storage is needed. The thing is that i need the post to be handle by a javascript which in turn will be inserting the form fields data into a database table.
    Can you give an idea of how doing that?
    Tnx in advance

  7. Could you post a tutorial on how to work with forms in an IOS app that will be submitted to the app store. This may be part of the phonegap series you are working on, but I thought I would ask.

    Thanks for the good work!

    Jerry

  8. Hi there, while googling something about jQuery Mobile, I found your lecture. Thanks and it helps me alot to understand.

    However, I’m curious what development tool you are using on the video.
    I’ve got heard sometime on the video, but i didn’t catch.
    It looks like Mac program, but i wonder that there are similar program for PC based on MS windows.
    I thought that is UltraEdit or EditPlus, but both are not completing automatically full syntax like {} or (); something.

    Please, give me an advice. I will be appreciated :)
    Thanks.

Trackbacks and Pingbacks:

  1. Team update: Week of June 27th | jQuery Mobile - August 29, 2011

    [...] jQuery Mobile Forms Part 1 The Basics [...]

  2. jQuery Mobile Development Guide | Pinehead.tv - June 27, 2012

    [...] jQueryMobile Forms Part 1 The Basics [...]