-2

I have a stand alone HTML form, and I want to add a functionality similar to a save as draft. If suppose the user fills up half form and decides to pause and continue filling form some time later . When the user visits the website again the previously filled data should be available to the user. In simple words I want to achieve something like save and complete the form later.

Also to add this is a stand alone HTML form using javascript. When I browsed on the net one suggestion I found was localStorage. But just want to know if there is some other way of achieving this functionality. Please direct me to some useful link which can help me with this feature.

sugar
  • 251
  • 4
  • 13
  • Have you looked at http://garlicjs.org/ – Sam May 13 '15 at 10:45
  • @sam i tried sisyphus.js . the form data is getting saved but one problem is many of the form fields are having events attached to them, that is on selection of yes in one field enables some other field. with sisyphus the data is getting saved but these events are not triggering :( like if I have a field do you need fruits? if user says NO, then a function should be called which disables next field depending on the YES/NO answer for above question – sugar May 14 '15 at 09:53

2 Answers2

1

If you act on the client you may use all the clientside persistent facilities currently available like local storage, websql, cookies.

I think that local storage is the easier to implement and you find a lot of libraries that provide you a friendly interface to interact with it like http://www.jstorage.info/ for jQuery or https://github.com/tymondesigns/angular-locker for AngularJS.

What you need to do is something like:

var frm = $(document.myform);
var inputs = frm.find('input');
inputs.change(function() {
var data = JSON.stringify(frm.serializeArray());
    localStorage.setItem("form", data);
})

You can put a check for the existence of that key in local storage during the page load and then populate the form accordingly.

Hope it helps :)

Enrico Deleo
  • 388
  • 2
  • 15
1

There are only a few ways to do this. A completely portable implementation will require server-side changes.

  • localStorage - Save Form using localstorage HTML5

     Use Javascript to save the data which is entered into the form as it changes. I recommend implementing this layer no matter which version you decide to go with.

  • Save in database - Examples vary by back-end language.

     The simplest implementation of this is to add a single boolean column to your database which indicates all data necessary to continue has been collected. This version has the benefit of being usable across machines.

  • Cloud storage - http://docs.aws.amazon.com/AWSJavaScriptSDK/guide/browser-intro.html

     You might consider using a service like Amazon DynamoDB or another NoSQL cloud storage system to cache data like this. The convenience of sending a JSON object to most NoSQL engines and restoring the same to a form is great, and codes very similar to the localStorage version.

  • Q-Code / Code restoration - http://webqr.com/

     This, in my opinion, is the worst option. However, it may fit your scenario. Generate a Q-Code which the user can scan to restore the page with the data. Q-Codes can hold a surprising amount of data. If your form doesn't use much text entry, you might get away with giving the user a short code (5-8 characters) which can be used to restore the form state.

Community
  • 1
  • 1
FesterCluck
  • 320
  • 1
  • 7