Post data by ajax using coldfusion component

In this example, we are using AJAX to handle the form submission with form validations, That's insert data into database table.

	<cfoutput>
	<script type="text/javascript" src="includes/jquery.js"></script>
	<script type="text/javascript" src="includes/jquery.validate.pack.js"></script>
	<script type="text/javascript" src="includes/jquery.form.js"></script>
	<script type="text/javascript">
	function ProcessValidateForm()
	{
	$("##ProcessStatus").html('Processing...');
	$.post('update.cfc?method=UpdateMethod&returnFormat=plain',
	$("##ValidateForm").serialize(),
	function(data,ProcessStatus)
	{
	data = $.trim(data)
	if (data == 'success')
	{
	$("##ProcessStatus").html('Record Insert Successfully');
	}
	});
	return false
	}
	$(document).ready(function()
	{
	$("##ValidateForm").validate(
	{
	rules:
	{
	FirstName: {required: true},
	EmailID:{required:true,email:true},
	ContactNo:{required:true}
	},
	messages:
	{
	FirstName: '&nbsp;**',
	EmailID: '&nbsp;**',
	ContactNo: '&nbsp;**'
	},
	submitHandler: function(form)
	{
	$(form).ajaxSubmit(ProcessValidateForm);
	}
	});
	});
	</script>
	<script type="text/javascript">
	function intOnly(i)
	{
	if (i.value.length > 0)
	{
	i.value = i.value.replace(/[^\d]+/g, '');
	}
	}
	</script>
	<form id="ValidateForm">
	<table width="990" border="0" cellpadding="0" cellspacing="10" bordercolor="Red">
	<tr>
	<td></td>
	<td><div id="ProcessStatus"></div></td>
	</tr>
	<tr>
	<td width="120" class="TableText" align="right" valign="middle">First Name: *</td>
	<td><input type="text" name="FirstName" id="FirstName" value="" Class="TableText" size="35"></td>
	</tr>
	<tr>
	<td width="120" class="TableText" align="right" valign="top">Email ID:&nbsp;*</td>
	<td><input type="text" name="EmailID" id="EmailID" value="" size="35"></td>
	</tr>
	<tr>
	<td class="TableText" align="right" valign="top">Country:&nbsp;</td>
	<td><input type="text" name="Qualification" id="Qualification" value="" Class="TableText" size="35"> </td>
	</tr>
	<tr>
	<td class="TableText" align="right" valign="middle" width="120">Contact No:&nbsp;*</td>
	<td><input type="text" maxlength="10" id="ContactNo" name="ContactNo" value="" size="35" onKeyUp="javascript:intOnly(this);">
	</td>
	</tr>
	<tr>
	<td></td>
	<td align="left"><input type="submit" value="S U B M I T" /></td>
	</tr>
	</table>
	</form>
	</cfoutput>

view raw index.cfm hosted with ❤ by GitHub

Output : -

On click Submit button:

That form post the values on update.cfc file.

	<cfcomponent>
	<cfset ODBCDataSource="xxxxxxxx">
	<cffunction name="UpdateMethod" access="remote" output="false" returnType="string">
	<cfquery name="InserRecord" datasource="#ODBCDataSource#">
	insert into TableName
	(
	FirstName,
	EmailID,
	Qualification,
	ContactNo
	)
	values
	(
	<cfqueryparam value="#FirstName#" cfsqltype="CF_SQL_VARCHAR">,
	<cfqueryparam value="#EmailID#" cfsqltype="CF_SQL_VARCHAR">,
	<cfqueryparam value="#Qualification#" cfsqltype="CF_SQL_VARCHAR">,
	<cfqueryparam value="#ContactNo#" cfsqltype="CF_SQL_VARCHAR">
	)
	</cfquery>
	<cfreturn "success">
	</cffunction>
	</cfcomponent>

view raw update.cfc hosted with ❤ by GitHub

On Successfully Submit data Screen :

I hope this is useful for new coldfusion programmers. Thank You