Solved

Disable Submit Button on CFC cfdiv bind

Posted on 2015-01-03
4
115 Views
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;" />

</TD></TR>

Open in new window


CFC

<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 = '#arguments.email#'
</CFQUERY>

    
        <!--- Got it? --->
        <cfif CheckEmail.RecordCount gt 0 and len(arguments.email)>
            <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>">
            
            <CFELSE>
            <CFSET result="">
        </cfif>

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

Open in new window

0
Comment
Question by:digitalwise
  • 2
4 Comments
 
LVL 28

Expert Comment

by:Pravin Asar
Comment Utility
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" />
</cfform>


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

Expert Comment

by:Pravin Asar
Comment Utility
Hello,

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;">
      </cfdiv>
</cfform>

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

Accepted Solution

by:
_agx_ earned 500 total points
Comment Utility
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 "dupe@test.com" 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 = "dupe@test.com">

<!--- Create proxy to CFC --->
<cfajaxproxy cfc="mycfc" jsclassname="CFCProxy" /> 
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></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();
		proxy.setSyncMode();
		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;
	}
</script>
</head>
<body>
	<div id="status" style="font-size:14px; color:red;"></div>
	
	<cfform onSubmit="return validateEmail()">
		Email 
		<cfinput id="email"
			type="text" name="email" size="40"
			value="#getemail.emailaddress#" 
			required="true"
			message="Please enter an email for this person - check the formatting."
			maxlength="50" 
			validate="email">
		<input type="submit" name="Submit">
	</cfform>
</body>
</html>

Open in new window


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

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></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 );
				event.preventDefault();
			}
			// otherwise, allow submit
			return;
		});
	});
</script>
<body>
	<form method="post">
		Email
		<cfoutput>
		<input id="email"
			type="text" 
			name="email" 
			value="#getemail.emailaddress#" 
			size="40"
			maxlength="50" 
			/>
	
		<input id="submitForm" type="submit"/>
		</cfoutput> 
		<div id="status" style="font-size:14px; color:red;"></div>
	</form>
</body>
</html>

Open in new window


CFC
<cfcomponent> 
	<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", arguments.email)>
			<cfset result.isValid = false>
			<cfset result.message = "Please enter a valid email address">
		</cfif>

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

Open in new window

0
 

Author Closing Comment

by:digitalwise
Comment Utility
Thanks as usual!
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

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 subm…
CFGRID Custom Functionality Series -  Part 1 Hi Guys, I was once asked how it is possible to to add a hyperlink in the cfgrid and open the window to show the data. Now this is quite simple, I have to use the EXT JS library for this and I achiev…
Internet Business Fax to Email Made Easy - With eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

762 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

6 Experts available now in Live!

Get 1:1 Help Now