ColdFusion 8: Auto Saving a Form is Straightforward
ColdFusion 8Made popular by GMail the ability to auto save a draft of a form is becoming more and more commonplace. And with ColdFusion 8 its very straightforward thanks to the included JavaScript libraries and in particular this line of code:
ColdFusion.Ajax.submitForm("auto", "draftform.cfm",setSaveTime);This will submit, via AJAX, the form with an id of "auto" to draftform.cfm and send any response from that page to the JavaScript function setSaveTime. What does that function do? It nicely displays a message saying a draft was autosaved at the current time (or at least the current time the users computer is set to).
But, back to the ColdFusion. How do we include the needed JavaScript libraries? Well, if you use cfform it is automatically included as the example below shows (note also the use of a richtext area):
<s.cript type="text/javascript" src="autoSave.js"></s.cript> <h2>Auto Save Demo</h2> <div id="messageArea"></div> <cfform name="auto" id="auto"> Title: <input name="title" id="title" size="30"><br> Radio: <cfinput type="radio" name="question1" value="yes">Yes <cfinput type="radio" name="question1" value="no">No<br> Checkbox: <cfinput type="checkbox" name="question2" value="cf7">CF7 <cfinput type="checkbox" name="question2" value="cf8">CF8<br> Entry: <cftextarea richtext="true" toolbar="Basic" name="entry"></cftextarea> </cfform>
The other way is to use cfajaximport which will import the needed JavaScript libraries as this code shows:
<cfajaximport tags="cfform"> <s.cript type="text/javascript" src="autoSave.js"></s.cript> <h2>Auto Save Demo</h2> <div id="messageArea"></div> <form name="auto" id="auto"> Title: <input name="title" id="title" size="30"><br> Radio: <input name="question1" value="yes" type="radio">Yes <input name="question1" value="no" type="radio">No<br> Checkbox: <input name="question2" value="cf7" type="checkbox">CF7 <input name="question2" value="cf8" type="checkbox">CF8<br> Entry: <textarea richtext="true" toolbar="Basic" name="entry"></textarea> </form>
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. Anyway here is the code:
function autoSave(){
ColdFusion.Ajax.submitForm("auto", "draftform.cfm",setSaveTime);
autoSaveEvery(120000);
}
function autoSaveEvery(ms) {
var timeout=setTimeout("autoSave()",ms);
}
function setSaveTime(res) {
if (res) {
document.getElementById('messageArea').innerHTML = 'Autosaved at ' + nowFormated();
}
}
function nowFormated(){
var now = new Date();
var ampm = "AM";
var hour = new Number(now.getHours());
if (hour > 12) {
ampm = "PM";
hour = hour - 12;
} else if (hour == 0) {
hour = 12;
}
var minutes = new Number(now.getMinutes());
if (minutes <= 9) {
minutes = "0" + minutes;
}
return hour + ":" + minutes + " " + ampm;
}Oh, and what does draftform.cfm do? Whatever you want it to! I would suggest entering the form data into a database and have a column isDraft that would be set to 1 (or something like that). While playing with this I just had it dump the form contents to a file and return true as seen here:
<cfdump var="#form#" output="/misc/auto.txt"> <cfoutput>true</cfoutput>
There is also a way to do this with cfajaxproxy, once I play with that I will blog it as well. [UPDATE: 8/27/07 Here is that entry. ]
Outside of that - VERY cool post.
http://www.beetrootstreet.com/blog/index.cfm/2008/...
Hope it helps
Martin
If anyone is trying to get the code working simply change InvalidTag to script and you will be all set.
And thanks Ray!
Coldfusion.Ajax.submitform: Error submitting form,id:auto :Internal server error.
Do you know this error
You can check it @ http://www.teamcapeholland2008.nl/autosafe.cfm
I have change InvalidTag to script :-)
http://www.teamcapeholland2008.nl/draftform.cfm
Now changed and working ...thnx
http://www.teamcapeholland2008.nl/misc/auto.txt
Loading....