<

Using  Coldfusion  in built AJAX  & JSON  Functions to submit and validate a form

Published on
15,484 Points
8,784 Views
2 Endorsements
Last Modified:
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.

 
<CFAJAXIMPORT />
<cfform name="frm" method="post" id="frm"> 
Name:
 <cfinput id="Name" name="Name"   /> 
 <div id="NameError"></div> 
 </div>  
Email Address :
 <cfinput id="emailAddress" name="emailAddress"   /> 
 <div id="emailAddressError"></div> 
 </div> 
 
 <div><cfinput name="submit" type="button" value="submit" onclick="Formsubmition();"></div> 
</cfform> 

<script>
function Formsubmition() { 
document.getElementById("NameError").innerHTML = ''; 
document.getElementById("emailAddressError").innerHTML = ''; 
ColdFusion.Ajax.submitForm('frm','action.cfm', responsecallback, errorHandler);
}
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');
     } 
} 
 function errorHandler(id, message) {
	
	   alert("Error while inserting\n Error code: "+id+"\n Message: "+message); 
		
	
	} 
</script>

Open in new window



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  -- http://livedocs.adobe.com/coldfusion/8/JavaScriptFcns_03.html
       ColdFusion.Ajax.submitForm function to submit form contents to a CFML page or to a CFC  without refreshing the page.

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" />

Open in new window


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.

If the Errors structure is empty after all validations we insert  in to Database .
IF the Error Structure is not empty then we serialize the Error structure to JSON string using
serializeJSON (serialize a ColdFusion object into a JSON string.)
http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=ajaxdata_09.html

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');
     } 
}

Open in new window


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.


There are  many Inbuilt  Ajax and JSON functions  in Coldfusion.  Below URL explains some of them  
http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=JavaScriptFcns_02.html
2
Comment
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
0 Comments

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Join & Write a Comment

Video by: ITPro.TV
In this episode Don builds upon the troubleshooting techniques by demonstrating how to properly monitor a vSphere deployment to detect problems before they occur. He begins the show using tools found within the vSphere suite as ends the show demonst…
Have you created a query with information for a calendar? ... and then, abra-cadabra, the calendar is done?! I am going to show you how to make that happen. Visualize your data!  ... really see it To use the code to create a calendar from a q…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month