Solved

Disable Submit Button on CFC cfdiv bind

Posted on 2015-01-03
4
133 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 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 "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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

PROBLEM: How to add your own buttons to the bottom toolbar with paging info ( result count ). While creating a cfgrid, I ran into an issue where I wanted to embed my own custom buttons where the default ones ( insert / delete / etc… ) are for aes…
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…
I've attached the XLSM Excel spreadsheet I used in the video and also text files containing the macros used below. https://filedb.experts-exchange.com/incoming/2017/03_w12/1151775/Permutations.txt https://filedb.experts-exchange.com/incoming/201…

749 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