<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

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

Published on
16,013 Points
9,313 Views
2 Endorsements
Last Modified:
Approved
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
0 Comments

Featured Post

OWASP: Threats Fundamentals

Learn the top ten threats that are present in modern web-application development and how to protect your business from them.

Join & Write a Comment

A query can call a function, and a function can call Excel, even though we are in Access. This is Part 2, and steps you through the VBA that "wraps" Excel functionality so we can use its worksheet functions in Access. The declaration statement de…
Watch this simple and effective video tutorial to extract attachments from Outlook 2007 and try this easy method by yourself. No need to go anywhere, just watch the video and export attachments from Outlook in few simple steps. To know more, click h…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month