Good way to save form inputs immediately after entry?

[fuzzybabybunny]

Is there a plugin or an easy method for saving the contents of form fields, radio buttons, checkboxes, etc as the user is filling them out?

I have a rather long form and would like it to save its progress in real-time without page reloads. If the user accidentally clicks back it won't wipe.

I've got jQuery, Ruby on Rails, and CoffeeScript knowledge. All rudimentary.

 

[KB]

I am not aware of a plugin (except for browsers) but there are many options for doing this:

You can use Web Database support: requires HTML 5
http://www.tutorialspoint.com/html5/html5_web_sql.htm

You can use local storage support: requires HTML 5
http://www.tutorialspoint.com/html5/html5_web_storage.htm

You can use cookies:
http://www.w3schools.com/js/js_cookies.asp

You can use AJAX to send the data to your server to store it there.
https://api.jquery.com/jQuery.ajax/

 

[fuzzybabybunny]

Which one would you recommend?

 

[Ken g6]

Depends. Is your goal to get the user's information before they hit submit, or to let the user get their information back if they accidentally leave the page before hitting submit? To do the former, use AJAX.

Assuming you're not trying to snoop, you probably want local storage and/or cookies. Cookies can only store a little under 4K, total, for a site. So if your form uses just radio buttons, checkboxes, and dropdowns, you can probably stuff that into 4K. If it has free-form text fields, you may have a harder time storing those - though setting a size limit might help.

If you run out of cookie space, you can use local storage. (Probably session storage in your case?) The downside to this is that while cookies are supported by probably every browser, local storage isn't. So I'd put as many fields as possible into a cookie before looking at local storage.

 

[uclabachelor]

Is there a plugin or an easy method for saving the contents of form fields, radio buttons, checkboxes, etc as the user is filling them out?

I have a rather long form and would like it to save its progress in real-time without page reloads. If the user accidentally clicks back it won't wipe.

I've got jQuery, Ruby on Rails, and CoffeeScript knowledge. All rudimentary.

Use jQuery's ajax to send that to the server, which then saves the data into its session.

 

[Ken g6]

Use jQuery's ajax to send that to the server, which then saves the data into its session.

That would require an AJAX call every time a form field is changed. Seems like a lot of server traffic for not a lot of benefit.

 

[purbeast0]

yeah i agree, a server call for each field update seems very inefficient.

 

[Train]

This isn't the 90's. Mainstream sites (e.g. Google) already send info on every keypress. If all your sending is bits of JSON there isn't a worry about traffic.

This only really needs to send on a 5 second poll when there are changes or on the blur event for each field.

 

[Markbnj]

This isn't the 90's. Mainstream sites (e.g. Google) already send info on every keypress. If all your sending is bits of JSON there isn't a worry about traffic.

This only really needs to send on a 5 second poll when there are changes or on the blur event for each field.

Still not worth it imo. If you're doing look aheads and whatnot then that's a good ROI, but just to preserve form fields in the event of a navigation event?

 

[purbeast0]

yeah i guess "inefficient" wasn't the right word, more like overkill.

also i'm assuming the OP is using a shared server and that is a lot of requests to make on a shared server if it's just when people are typing in the fields making changes.

perhaps the design of a big ass form is a bad design and it should be simplified into pages.

 

[beginner99]

window.onbeforeunload = function() {
	// save data with chosen strategy
};

This will be called if the user leaves the current page by browsing somewhere else, closing the tab or closing the browser.

Here you could in fact use ajax since it won't be called often.

 

[Ken g6]

Ah, so that's how pages show "are you sure you want to navigate away" dialogs? That might be a simpler solution than saving the form data.

 

[BoberFett]

perhaps the design of a big ass form is a bad design and it should be simplified into pages.

This.