Disable Submit Button on CFC cfdiv bind

Posted on 2015-01-03
Last Modified: 2015-02-16
We are checking to see if the email address is already in the system.  If it is, the system displays the message that the email is in the system but does not clear the email address.     I want to disable the submit button until they enter a valid email.     Any suggestions??  I am open to clearing the field too but every time I try that, the message goes away.

<TR class="special"><TD valign="top"><img src="images/RedStar.gif" ALT="Required" /></TD><TD class="tdheader" valign="top">Email:</TD><TD><cfinput type="text" name="email" size="40" Required="yes" message="Please enter an email for this person - check the formatting." value="#getemail.emailaddress#" maxlength="50" validate="email">

<cfdiv bind="cfc:email.checkemail({email})"
    style="font-size:14px; color:blue;" />


Open in new window


<cffunction name="checkemail" access="remote" returnType="string">
        <cfargument name="email" type="string" required="true">

        <!--- Define variables --->
        <cfset var data="">
        <cfset var result="">

        <!--- Get data --->
        <CFQUERY NAME="CheckEmail" datasource="appa_backoffice">
	select contactinfoid from cn_emailaddresses where emailaddress = ''

        <!--- Got it? --->
        <cfif CheckEmail.RecordCount gt 0 and len(>
            <cfset result="<br><em><span style='color: red;'>The email you have entered is already in the database.  Please enter a different email address.</span></em>">
            <CFSET result="">

        <!--- And return it --->
        <cfreturn result>

Open in new window

Question by:digitalwise
  • 2
LVL 28

Expert Comment

by:Pravin Asar
ID: 40532396
ColdFusion has another attribute called   enabled="true|false". But this works with flash forms only.

So I think, you will be better of enable/disable the button , you could simply use jquery/javascript solution.

Here is some sample code.

<cfform name="f0">
      <cfinput type="text" name="email" onkeyup="validate()"/>
      <cfinput type="submit" name="sbtn1" value="Submit" disabled="true" />

<script type="text/javascript">
function validate(){
      alert ( );
    if ( >   0 ){
    else {
        document.f0.sbtn1.setAttribute("disabled", "true");
LVL 28

Expert Comment

by:Pravin Asar
ID: 40534729

I am not sure, if you still interested in the solution.

Anyway here is a simple coldfusion bind example.

<!--- example.cfm --->

<cfform name="f0">
      <cfinput name="email" value="" type="text"/>
        <!--- Look for keyup on email field ---->
      <cfdiv bindonload="true" bind="url:ajaxRes.cfm?field={email@keyup}" style="font-size: 14px;">

<!---- ajaxRes.cfm --->
<cfif isdefined ("url.field") and len(trim(url.field))>
      <input type="submit" value="Submit" name="sbtn1"/>
      <cfoutput>Enter field value</cfoutput>
LVL 52

Accepted Solution

_agx_ earned 500 total points
ID: 40534905
If I'm understanding correctly, neither of those will do exactly what you're looking for.

IMO it's hard to do complex (or compound) stuff with the CF ajax features.  Might be easier using something like jquery.validate.  However, if you prefer to stick with cfform, you could create a proxy to the CFC.  Then call it when the form is submitted.  If the email doesn't validate, cancel the submission.   Another simple approach is to use a plain html form and a touch of jquery.  Below is a working example of both options.

Note:  The cfc is obviously jerry-rigged to work w/out a db query.  Use "" if you want to test the duplicate error handling.  Any other (valid) email address will be successful.

Option #1 - CFFORM
<!--- For DEMO Only --->
<cfset getemail.emailaddress = "">

<!--- Create proxy to CFC --->
<cfajaxproxy cfc="mycfc" jsclassname="CFCProxy" /> 
<script src=""></script>
<script type="text/javascript">
	function validateEmail() {
		// get email address entered
		var value = document.getElementById('email').value;
		// validate synchronously so we can wait for a response
		var proxy = new CFCProxy();
		var result = proxy.checkemail( email=value );

		// display errors
		if (!result.ISVALID) {
			document.getElementById('status').innerHTML = result.MESSAGE;
		// allow submit if it's a valid address
		return result.ISVALID;
	<div id="status" style="font-size:14px; color:red;"></div>
	<cfform onSubmit="return validateEmail()">
		<cfinput id="email"
			type="text" name="email" size="40"
			message="Please enter an email for this person - check the formatting."
		<input type="submit" name="Submit">

Open in new window

Option #2 - JQuery
<!--- For DEMO Only --->
<cfset getemail.emailaddress = "">

<script src=""></script>
<script type="text/javascript">
	$( document ).ready(function() {
		$("#submitForm").click(function( event ) {
			// invoke cfc to validate email address
			var input = $('#email').val();
			var response = "";
			$.ajax({ url: 'mycfc.cfc?method=checkemail&returnformat=json'
		            	, data: {email: input }
			            , dataType: 'json'
		    	        , type: 'POST'
		        	    , async: false
			        .done(function(data) {
			        	// cfc was invoked successfully
			        	response = data;	
		        	.fail(function(jqXHR, status, error) {
			        	// an unexpected error occured calling cfc
		        		response = {ISVALID:false, MESSAGE:error}	
			// if email is invalid, or an error occurred, display 
			// the error message and prevent submit
			if (!response.ISVALID) {
				$("#status" ).text( response.MESSAGE );
			// otherwise, allow submit
	<form method="post">
		<input id="email"
		<input id="submitForm" type="submit"/>
		<div id="status" style="font-size:14px; color:red;"></div>

Open in new window

	<cffunction name="checkemail" access="remote" returnType="struct"
				hint="Validates the given value is a valid email address AND is not already on file">
        <cfargument name="email" type="string" required="true" />

		<!---  initialize response --->
		<cfset var result = { isValid = true, message="" } />

		<!--- Verify the supplied value is a valid email address --->
		<cfif not isValid("email",>
			<cfset result.isValid = false>
			<cfset result.message = "Please enter a valid email address">

        <!--- DEMO only.  Simulate a duplicate email address. --->
		<cfif eq "">
			<cfset result.isValid = false />
			<cfset result.message = "The email you have entered is already in the database.  Please enter a different email address." />
        <cfreturn result />

Open in new window


Author Closing Comment

ID: 40613202
Thanks as usual!

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
looping over JSON Object and insert into query 3 57
cfgrid format issue and columns missing 4 90
Update cached table in H2 database 6 42
coldfusion cfloop help 6 24
Hi, I will be creating today a basic tutorial on how we can create a Mail Custom Function and use it where ever we want. The main advantage about creating a custom function is that we can accommodate a range of arguments to pass to the Function and …
PROBLEM:  How to open a cfwindow or run a function on double click of a cfgrid row. One of my clients wanted to be able to double click on a row item to get more detailed information about a transaction and to be able to modify the line items i…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

912 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now