?
Solved

Disable Submit Button on CFC cfdiv bind

Posted on 2015-01-03
4
Medium Priority
?
153 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 29

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" />
</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 29

Expert Comment

by:Pravin Asar
ID: 40534729
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 2000 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 "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
ID: 40613202
Thanks as usual!
0

Featured Post

Stack Overflow Podcast - Developer Story

Welcome to the Stack Overflow podcast recorded Thursday July 20 at Stack Overflow Headquearters in NYC. Your hosts today are podcast regulars Jay Hanlon, David Fullerton, and Ilana Yitzhaki, plus the quite irregular Matt Sherman (Stack Overflow Engineering Manager extraordinaire)

Question has a verified solution.

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

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…
Today, I was working on some optimization and spam-stopping techniques when I encountered Ben Nadel's post to reduce spam feature using Math (http://www.bennadel.com/blog/197-How-I-Stop-Spammers-On-My-ColdFusion-Blog.htm). While this method is not o…
In this video we outline the Physical Segments view of NetCrunch network monitor. By following this brief how-to video, you will be able to learn how NetCrunch visualizes your network, how granular is the information collected, as well as where to f…
Add bar graphs to Access queries using Unicode block characters. Graphs appear on every record in the color you want. Give life to numbers. Hopes this gives you ideas on visualizing your data in new ways ~ Create a calculated field in a query: …

777 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