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.

 

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

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

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

Select all 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