Our community of experts have been thoroughly vetted for their expertise and industry experience.
Published:
Updated:
Browse All Articles > Using Coldfusion in built AJAX & JSON Functions to submit and validate a form
This article is about submitting form through ColdFusion.Ajax.submitForm to the action page and send a response back in JSON format which later can be decoded using ColdFusion.JSON.decode. By this way you can avoid the usual page refresh for submitting the forms and also sending response back in the best way which is JSON (JavaScript Object Notation).
Form
A simple user form which gives the option of entering Name and Email.
We have a simple form frm with an option to enter name and email.
We have simple div below each form input field with a unique respective ids. we use these divs to print errors after validating the form.
On click of submit button js function Formsubmition is triggered which submits the form using ColdFusion.Ajax.submitForm.
ColdFusion.Ajax.submitForm('frm','action.cfm', responsecallback, errorHandler);
In our page ColdFusion.Ajax.submitForm method takes the values of all of the items in the form frm , and posts them to the file 'action.cfm. When we get back a response, the responsecallback function is called, and should there be any errors, the errorHandler method is executed.
One important thing ColdFusion.Ajax.submitForm function does not support uploading a file attachment to the form.
Action
A action page which validates all inputted data and returns the errors in json format is there are any errors else insert the data in to DB.
action.cfm file
<cfsetting enablecfoutputonly="true" /> <cfset errors = StructNew() /> <cfif form.Name EQ ""> <cfset errors["Name"] = "You must enter a first name." /> </cfif> <cfif NOT isValid("email", form.emailAddress)> <cfset errors["emailAddress"]= "You must enter a valid email address" /> </cfif> <cfif structIsEmpty(errors)> <!--- insert in to db ---><cfelse> <cfoutput><cfoutput>#serializeJSON(errors)#</cfoutput></cfoutput> </cfif> <cfsetting enablecfoutputonly="false" />
A coldfusion structure named errors is created which will hold all the validation errors with key names equal to the div ids given in the form page under each input field. This actually helps in populating data in to the corresponding divs.
As we are wrapping the Json string in <cfoutput> </cfoutput> tags the JSON string will be sent back in response for the Coldfsuion.ajax.Submitform call if there are any errors.
Responsecallback function takes one parameter which is the response sent back by server.
function responsecallback(response){ var errors = ColdFusion.JSON.decode(response); var errorexist = false; for(i in errors){ document.getElementById(i+"Error").innerHTML = errors[i]; errorexist = true; } if(! errorexist){ alert('Data Inserted'); } }
The returned response in JSON so we decode to JavaScript object using ColdFusion.JSON.encode(accepts a JavaScript object, and returns a JSON string).
We loop over through elements of this JavaScript object and set the content of corresponding Div with Error message and set the variable errorexist to true which is initially set to false.
We can use this variable to display or do whatever we want like we are alerting 'Data Inserted' in our example.
Summary
These is an simple example which explains the use of coldfusion.ajax.submitform and JSON functions which are one of the best additions to built in functions in Coldfusion 8.
Comments (0)