Add Comment

Auto Save Form Tutorial

ColdFusion Tutorial #10

ColdFusion 8 cfform tag comes with javascript libraries that enable AJAX form submission. This example ties this in with some Javascript to autosave the form at a specified number ofmilliseconds.

demo.cfm

To fire off the autosave action the onLoad attribute of the body tag calls autoSaveEvery with an argument of milliseconds. This function calls the JavaScript function setTimeout which after the specified number of milliseconds will call autoSave. autoSave contains the ColdFusion.Ajax.submitform line and then calls autoSaveEvery to begin the cycle again.

Thats it. The form can contain any elements either those created by cf (cfinput, cftextarea, etc) or straightforward html form.

autoSaveAction.cfm

Most likely the action page will save values to a database, possibly with a flag indicating its a draft, but for examples sake we will put them in a session variable.

This just saves the form into a session variable.

autoSaveView.cfm

The view page just dumps the saved results from the session variable.

Demo

See this code running!

Download

Download this code as a zip!

Comments

great example
Paul @ Saturday 29 Sep 2007 - 02:26:36 AM

Im trying out this demo but the array is always empty??
Joe Coree @ Friday 02 Nov 2007 - 09:04:22 PM

Not sure what happened here as this was working.
I've modified the code slightly and it is working again
Dale Fraser @ Friday 02 Nov 2007 - 09:35:56 PM

Thanks demo works now
But I still get an empty array on my dev version using the new action page
Joe Coree @ Friday 02 Nov 2007 - 10:04:08 PM

In order to use session variables - had to add an Application.cfm!
Joe Coree @ Friday 02 Nov 2007 - 11:05:44 PM

Thanks for the tutorial. Might be a good idea to link your blog to this site, if you haven't already done so.
Calvert @ Wednesday 07 May 2008 - 05:32:52 AM

I am tryed out the demo but the array is always empty?
Josiah @ Friday 10 Apr 2009 - 01:21:14 AM

Akash Bavlecha
Akash @ Saturday 16 May 2009 - 06:46:52 PM

As Joe pointed out for the session variables to work you need either an Application.cfc or Application.cfm file.
Sam Farmer @ Saturday 16 May 2009 - 09:41:25 PM

If you use the code from the demo and remove <cftextarea richtext="true" toolbar="Basic" name="entry"></cftextarea> it will NOT work.
So you have to do a
<cfajaximport tags="cfform"> before the cfform. Hope that helps somebody.

La Bala De Plata @ Friday 04 Sep 2009 - 07:12:39 AM

I am having problems having the saved draft update a database instead of a session variable.
Could someone please post how to do this, I would appreciate it.
Trent @ Thursday 31 Dec 2009 - 05:04:43 AM

Click button to add a comment

Author

Sam Farmer

Published

Thursday 27 Sep 2007

Original

This tutorial has been modified and published with permission of the author. The original tutorial can be found here
http://samfarmer.instantspot.com/blog/index.cfm/2007/8/27/ColdFusion-8-AutoSaving-with-cfAjaxProxy