2

This is what I am trying to implement and I don't know how to do it:

I have a few forms that users should be able to complete offline. Once the user has filled in the form they should be able to hit save and their data needs to be saved offline. Then later when they are online they can submit all the form data which was saved by hitting a button. They will be asked to log in and once they have done so their data will be saved on server.

These forms will be submitted via iPad/iPhone. The user can save multiple copies of each form.

I am looking for an HTML5/JavaScript/jQuery solution. My backend is php. I have not tried anything yet as I don't have any idea how to do this. Where do I start?

Thanks

Josh
  • 10,961
  • 11
  • 65
  • 108
aWebDeveloper
  • 36,687
  • 39
  • 170
  • 242
  • 3
    What have you tried? What's the specific programming problem you have encountered? – Polynomial Dec 17 '11 at 14:33
  • 4
    Would JavaScript localStorage (or sessionStorage) be of any use? Here's a starter: http://www.w3schools.com/html5/html5_webstorage.asp – Mike Sav Dec 17 '11 at 14:34
  • or use cookie, store data with base64 – zb' Dec 17 '11 at 22:18
  • @eicto cookies have limited size, encoding it would also make it longer http://stackoverflow.com/questions/640938/what-is-the-maximum-size-of-a-web-browsers-cookies-key – Joseph Dec 29 '11 at 16:13

2 Answers2

1

You can provide a manifest file to provide a specific form to a user - Application cache IIRC: http://dev.w3.org/html5/spec/offline.html

Caveat - without making it a native app the user would have to have visited the website while online before they will see any forms at all

Then once the user fills this in store the results in localStorage, ready to access when online.

If the user is online, the standard page will be displayed, and you can check local Storage for any unsubmitted forms, and on submission remove from localSorage.

Check out the principles used in this tutorial, they should get you most of the way there, but you'll have to look into offline html and localStorage a lot more to get a working app: http://sixrevisions.com/web-development/html5-iphone-app/

Hope that helps.

mattbee
  • 582
  • 5
  • 10
0

I don't think this is possible as an web-only solution targeting iOS, since you can't count on the forms staying up in Safari. Even if the user loaded the form in their browser ahead of time when they had an active internet connection, you can't count on Safari not trying to reload the page (which would clear the page and give a connection failure since they're offline).

Therefore, I think you have to create a native iOS app for this functionality.

If you were targeting desktops instead, you could probably accomplish this with browser plugins.

Michael Cox
  • 1,281
  • 13
  • 15