ColdFusion 8 - Async Form Submission
Posted By : todd sharp Posted At : June 20, 2007 1:39 PM Posted In: ColdFusion
16
ColdFusion 8 gives us a very cool and easy to use API for async form submission. In this demo we have a simple form:
<cfform name="testForm">
Name: <cfinput type="text" name="name" value="#form.name#"><br />
Phone Number: <cfinput type="text" name="phone" value="#form.phone#"><br />
Email: <cfinput type="text" name="email" value="#form.email#"><br />
Fake An Error? <cfinput type="checkbox" name="fakeError" checked="false" value="true" /><br />
<cfinput type="button" name="submit" value="Spam Me" onclick="javascript:submitFrm();">
</cfform>
</cfpod>
Notice my 'submit' button (just a button really) calls the JavaScript function submitFrm(). This function is quite trivial:
ColdFusion.Ajax.submitForm('testForm', 'formAction.cfm', myCB, myError);
}
Here is use ColdFusion's built in JavaScript API function ColdFusion.Ajax.submitForm. This function uses the following syntax:
httpMethod[, asynch]]]])
The form id and URL are obvious. The next two optional attributes are a bit new. They specify a callback and error handling JavaScript function to fire. The callback handler takes one argument - the response from a successful form submission. The error handler takes two arguments - the HTTP status code and error message of any errors thrown in the form submission. The final two optional arguments are the httpMethod (defaults to POST) and a Boolean asynch (defaults to true).
So in my demo I have a simple callback and error handler:
var msgDiv = document.getElementById('messages');
msgDiv.innerHTML = resp;
}
myError = function(sc,msg){
alert('Error!!! ' +sc +' '+msg);
}
My callback takes the response and shoves it in a simple div. This could be a confirmation message or validation error messages, etc. The error handler in this example just displays a simple alert message.
My action page is pretty trivial as well - just a handfull of validation checks on the form data and it outputs simple HTML with either errors or a confirmation message.
Check out the demo. I output the current time at the top of the page to illustrate the main page content being static.
To preserve submit on enter as well as the button click, change the 'button' to type 'submit'. Then move your submitFrm function call to the form onSubmit handler. You need to add a return false at the end of submitFrm() to prevent regular form submission.
Use your webserver security to only allow public access to the /CFIDE/scripts, all other access to /CFIDE URLs are disabled and security is not compromised.
Good plan, someone should tell the hosting provider.
http://h127171.cf8beta.com/CFIDE/administrator/ind...
I know a lot about IIS, but im not sure how I would even lock it down the way you are describing.
I think the issue in my case was that they physically had to put a copy of /CFIDE in my root because the virtual dirs weren't working.
Don't use your host then. It is your choice.
Apache: Use Location Directive along with the Order directive to allow/deny URLs
IIS: A quick check of the docs (haven't used since version 4) brings up the following: http://www.microsoft.com/technet/prodtechnol/Windo...
is it possible to provide a target (pod, layoutarea etc.) which is refreshed, when the form is submitted - to which the form is submitted?
All the best to you,
Bard
In the callback I call navigate to refresh a third cflayoutarea to show a list of files generated by the first script. Works beautifully.
it loads the result first time good and there after it does not display the result. i check in firebug and there it appears with lot of whitespace.
Can u please answer me what is wrong with this