Refreshing Captcha with coldfusion

[Irish-Phoenix]

Hello
I am trying to write a refresh for cfcaptcha. I got it from cfjedi blog and I can't get it to work. I have tried a number of different senarios of this code and even rewrote some of it. The image does not appear, I had it flashing in and then it would disappear so that wasn't a solution. I am adding my code.. I am hoping someone can help me get this to work.

showcaptcha.cfm page:

<cffunction name="makeRandomString" returnType="string" output="false">

<cfset var chars = "23456789ABCDEFGHJKMNPQRS">

<cfset var length = randRange(4,7)>

<cfset var result = "">

<cfset var i = "">

<cfset var char = "">

           <cfscript>

                   for(i=1; i &lt;= length; i++) {

    char = mid(chars, randRange(1, len(chars)),1);

    result&=char;

}

           </cfscript>

           <cfreturn result>

        </cffunction>

        <cfset captcha = makeRandomString()>

        <cfimage action="captcha" width="300" height="55" text="#captcha#" fonts="verdana,arial" difficulty ="medium">

Contact.cfm page

<script>

    $(document).ready(function() {

        $("#captchaDiv").load("showcaptcha.cfm #captchaDiv");   

        $("#reloadLink").click(function(e) {

            $("#captchaDiv").load("chowcaptcha.cfm #captchaDiv");

            e.preventDefault();           

        });

    })

    </script>

<cfoutput>

<cfform action="#cgi.script_name#" method="post" class="mail" id="formID" enctype="application/x-www-form-urlencoded"  preloader="true">

<cfinput name="name" type="text" value="#form.name#" id="name" placeholder="*Name" />

<!--- the rest of my inputs are all here --->

<div id="captchaDiv" style="width:300px; height:55px; margin-top:10px;"> </div>

        <span>Can't read?</span> <a href="" id="reloadLink">Reload</a><br />

        <span>ENTER SECURITY CODE</span>

  <cfinput type="text" name="captcha" style="margin-top:20px; margin-left:-142px;">

<cfinput type="submit" name="submit" value="Submit" class="more_button"/>

</cfform>

</cfoutput>

Can anyone help me out with this issue?

[BKBK]

Suggestions:

1) Place the image in a div, captchaImageDiv, which you then use in the Javascript.

2) Avoid cfform, and any other Coldfusion UI tag for that matter; they are outdated.

You should then get something like this:

showCaptcha.cfm

<cffunction name="makeRandomString" returnType="string" output="false">

<cfset var chars = "23456789ABCDEFGHJKMNPQRS">

<cfset var length = randRange(4,7)>

<cfset var result = "">

<cfset var i = "">

<cfset var char = "">        

   <cfscript>

       for(i=1; i LTE length; i++) {

            char = mid(chars, randRange(1, len(chars)),1);

            result&=char;

        }

   </cfscript>

   <cfreturn result>

</cffunction>

<cfset captcha = makeRandomString()>

<div id="captchaImageDiv">

<cfimage action="captcha" width="300" height="55" text="#captcha#" fonts="verdana,arial" difficulty ="medium">

</div>

contact.cfm

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script type="text/javascript" >

$(document).ready(function() {

    $("#captchaDiv").load("showCaptcha.cfm #captchaImageDiv");  

    $("#reloadLink").click(function(e) {

        $("#captchaDiv").load("showCaptcha.cfm #captchaImageDiv");

        e.preventDefault();          

    });

})

</script>

<cfoutput>

<cfparam name="form.name" default="">

<form action="#cgi.script_name#" method="post" class="mail" id="formID" enctype="application/x-www-form-urlencoded"  preloader="true">

<input name="name" type="text" value="#form.name#" id="name" placeholder="*Name">

<!--- the rest of my inputs are all here --->

<div id="captchaDiv" style="width:300px; height:55px; margin-top:10px;"> </div>

<span>Can't read?</span> <a href="" id="reloadLink">Reload</a><br>

<span>ENTER SECURITY CODE</span><input type="text" name="captcha" >

<input type="submit" name="submit" value="Submit" class="more_button" >

</form>

</cfoutput>

[Irish-Phoenix]

That's not working.. The cfimage still doesn't appear. I even tried putting it like this:
showcaptcha.cfm

<cffunction name="makeRandomString" returnType="string" output="false">

<cfset var chars = "23456789ABCDEFGHJKMNPQRS">

<cfset var length = randRange(4,7)>

<cfset var result = "">

<cfset var i = "">

<cfset var char = "">

           <cfscript>

                   for(i=1; i &lt;= length; i++) {

    char = mid(chars, randRange(1, len(chars)),1);

    result&=char;

}

           </cfscript>

           <cfreturn result>

        </cffunction>

<div id="captchaImageDiv">

<cfset captcha = makeRandomString()>

<cfset captchaHash = hash(captcha)>

<input type="hidden" name="captchaHash" value="#captchaHash#">

<cfimage action="captcha" width="300" height="55" text="#captcha#" fonts="verdana,arial" difficulty ="medium">

</div>

I also used the modified script you posted with the link to jquery.

[BKBK]

You should use your own original jQuery file. The captcha image code works. Copy and paste the following (which I tested, and which works):

showCaptcha.cfm

<cffunction name="makeRandomString" returnType="string" output="false">

<cfset var chars = "23456789ABCDEFGHJKMNPQRS">

<cfset var length = randRange(4,7)>

<cfset var result = "">

<cfset var i = "">

<cfset var char = "">        

   <cfscript>

       for(i=1; i LTE length; i++) {

            char = mid(chars, randRange(1, len(chars)),1);

            result&=char;

        }

   </cfscript>

   <cfreturn result>

</cffunction>

<cfset captcha = makeRandomString()>

<div id="captchaImageDiv">

<cfimage action="captcha" width="300" height="55" text="#captcha#" fonts="verdana,arial" difficulty ="medium">

</div>

To test it, just open the page in the browser. What do you get?

[BKBK]

Did you also apply the change in method.cfc? That is, this change:

$(document).ready(function() {

    $("#captchaDiv").load("showCaptcha.cfm #captchaImageDiv");  

    $("#reloadLink").click(function(e) {

        $("#captchaDiv").load("showCaptcha.cfm #captchaImageDiv");

        e.preventDefault();          

    });

})

[Irish-Phoenix]

Yes..

Would other logic in the page cause this problem?These codes are also working in this page:

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.js"></script>

<script src="js/jquery-1.4.2.js" type="text/javascript"></script>

could this cause problems?

[BKBK]

One of those script tags should be sufficient.

[BKBK]

I hope you saw that "method.cfc" was an error. "contact.cfm" was intended.

[BKBK]

Irish-Phoenix wrote:

Would other logic in the page cause this problem?These codes are also working in this page:

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.js"></script>

<script src="js/jquery-1.4.2.js" type="text/javascript"></script>

could this cause problems?

Yes, it could. The following code works as expected:

<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.js"></script>

<script type="text/javascript" >

$(document).ready(function() {

    $("#captchaDiv").load("showCaptcha.cfm #captchaImageDiv");  

    $("#reloadLink").click(function(e) {

        $("#captchaDiv").load("showCaptcha.cfm #captchaImageDiv");

        e.preventDefault();          

    });

})

</script>

[Irish-Phoenix]

The problem is that the cfimage does not appear at all. the jquery logic seems to refresh, but the image doesn't appear with the security codes.. it flashes in place for a second and goes away.. even on the page loading.
I think this is causing the problem:

<script>

$(function() {

        $('#dbType').change(function() {

            $('.selectDBType').slideUp("slow");

            $('#' + $(this).val()).slideDown("slow");

        });

    });

</script>

<select name="dbType" id="dbType" class="selectstyle">

   <option>How can we help you?</option>

   <cfif form.dbType EQ 'conta'><option value="conta" selected="selected">Contact</option><cfelse><option value="conta">Contact</option></cfif>

   <cfif form.dbType EQ 'web'><option value="web" selected="selected">Web Design</option><cfelse><option value="web">Web Design</option></cfif>

   <cfif form.dbType EQ 'print'><option value="print" selected="selected">Print Design</option><cfelse><option value="print">Print Design</option></cfif>

   <cfif form.dbType EQ 'app'><option value="app" selected="selected">Online Application Development</option><cfelse><option value="app">Online Application Development</option></cfif>

   <cfif form.dbType EQ 'compu'><option value="compu" selected="selected">Computer Repair</option><cfelse><option value="compu">Computer Repair</option></cfif>

</select>

<!--- the divs are all here, depending on what is selected that div appears with form fields in it --->

When I put this tag in:

<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.js"></script>

it stops the above code from working... Any suggestions? Maybe put the code for captcha above this code in the head?

[BKBK]

From your description, it seems jQuery is already loaded by the time you get to the current page. Some tests you could do: what happens when you

1) comment out the code in your last post?

2) run the 2 CFM files I gave you, and nothing else?

[Irish-Phoenix]

I didn't think of commenting it all out.. but it didn't help.. the captcha still isn't showing up. I have a way to do it but it loads the whole page again when you hit the link for refreshing the captcha and dumps the entire form if you started filling it out. Never thought this would be so frustrating..
But the cfimage still isn't showing up.. is there something I should do in the application.cfc file that will "turn it on" so to speak?

[BKBK]

I suspect there is interference from other code or script. To rule this out, create a new directory. Place the two CFM files I sent you in it.

Open showCaptcha in the browser to confirm that the image is showing. Then open contact.cfm.

What is the result?

[Irish-Phoenix]

it is throwing an error in the efscript.. here is the error :

Invalid CFML construct found on line 10 at column 32.

ColdFusion was looking at the following text: lt The CFML compiler was processing: An expression beginning with i, on line 10, column 29.This message is usually caused by a problem in the expressions structure. A script statement beginning with for on line 10, column 20. A cfscript tag beginning on line 9, column 13. A cfscript tag beginning on line 9, column 13.

The error occurred in e:/web/phoenixdigitalinc.com/showcaptcha.cfm: line 10

8 : 9 :            <cfscript> 10 :                    for(i=1; i &lt;= length; i++) { 11 :     char = mid(chars, randRange(1, len(chars)),1); 12 :     result&=char;

Maybe this is the issue? This is the showcaptcha.cfm file

[BKBK]

In the code I gave you, I had corrected that line:

<cfscript>

       for(i=1; i LTE length; i++) {

        }

   </cfscript>

[Irish-Phoenix]

IT WORKS NOW! I moved the jquery above the script for the other divs and both ways work now.. when I pull up the showcaptcha.cfm and the contact. Now one last question.. since I changed the captcha I get an error when doing the controls for form feilds. If you don't enter info in required feilds type controls.. this erors out now:

<cfif hash(form.captcha) neq form.captchaHash>

<cfset error = error & "You did not enter the right SECURITY text!<br>">

</cfif>

What should I change it to?

And THANK YOU!

[BKBK]

Glad to hear it now works.

Irish-Phoenix wrote:

<cfif hash(form.captcha) neq form.captchaHash>

<cfset error = error & "You did not enter the right SECURITY text!<br>">

</cfif>

What should I change it to?

To place your question in context, could you please show me the code you finally use. Could you also tell me the error message?

[Irish-Phoenix]

showcaptcha.cfm:

<cffunction name="makeRandomString" returnType="string" output="false">

<cfset var chars = "23456789ABCDEFGHJKMNPQRS">

<cfset var length = randRange(4,7)>

<cfset var result = "">

<cfset var i = "">

<cfset var char = "">      

   <cfscript>

       for(i=1; i LTE length; i++) {

            char = mid(chars, randRange(1, len(chars)),1);

            result&=char;

        }

   </cfscript>

   <cfreturn result>

</cffunction>

<cfset captcha = makeRandomString()>

<div id="captchaImageDiv">

<cfimage action="captcha" width="300" height="55" text="#captcha#" fonts="verdana,arial" difficulty ="medium">

</div>

contact.cfm:

<!--- I placed the code at the top of the head --->

<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.js"></script><!--Common jQuery plugin here -->

<script type="text/javascript" >

$(document).ready(function() {

    $("#captchaDiv").load("showCaptcha.cfm #captchaImageDiv");

    $("#reloadLink").click(function(e) {

        $("#captchaDiv").load("showCaptcha.cfm #captchaImageDiv");

        e.preventDefault();        

    });

})

</script>

<!--- all my other scripts go here --->

</head>

<body>

<!--- all my form variables here--->

<cfparam name="FORM.name" default="">

<cfset showForm = true>

<cfif structKeyExists(form, "submit")>

<!--- Create an empty error string --->

<cfset error = "">

<!--- other required fields are annualized here --->

<cfif hash(form.captcha) neq form.captchaHash>

<cfset error = error & "You did not enter the right SECURITY text!<br>">

</cfif>

<cfif error is "">

<!---efmail here and db code if form is ok--->

<cfset showForm = false>

</cfif>

</cfif>

<cfif showForm>

<cfif structKeyExists(variables, "error")>

<cfoutput>

<div id="error" align="center">

<b>You must fill out these REQUIRED fields:</b><br>

#error#

</div>

</cfoutput>

</cfif>

<cfoutput>

<cfform>

<!--- all my form feilds here--->

<div id="captchaDiv" style="width:300px; height:55px; margin-top:10px;"></div>

<span>Can't read?</span> <a href="" id="reloadLink">Reload</a>

<cfinput type="text" name="captcha">

<!--- submit button--->

</cfform>

</cfoutput>

<cfelse>

<cfoutput>

Congratulations message

</cfoutput>

</cfif>

That is the form in a nut shell. Here is the error:

Error message:

Element CAPTCHAHASH is undefined in FORM.

The error occurred in e:/web/mywebsite.com/contact.cfm: line 189

187 : </cfif> 188 : 189 : <cfif hash(form.captcha) neq form.captchaHash> 190 : <cfset error = error & "You did not enter the right SECURITY text!<br>"> 191 : </cfif>

It's because we took out the hidden field that has the actual code from the cfimage in it to compare to what you entered in the input captcha. Now it has nothing to compare it to so it is erroring. What do i compare the captcha image to to throw an error if you put it in wrong and or left the field empty?

I also have to use cfform because I have cfselects in this form using db queries and it was easier this way. I would rewrite them and loop queries inside a select tag....

But everything works but this requirement tag in my form required field code...

[BKBK · Accepted solution]

As I understand it, you want to pass a variable value (hash of captcha) from the page showCaptcha.cfm to the page contact.cfm. Communication between 2 CFM pages implies, for example, sessions.

One solution is as follows

in showCaptcha.cfm:

place the line

<cfset session.captchaHash = hash(captcha)>

just after the line

<cfset captcha = makeRandomString()>

in contact.cfm:

change the line

<cfif hash(form.captcha) neq form.captchaHash>

to

<cfif hash(form.captcha) neq session.captchaHash>

------------------------------------

(delete the now redundant line, <cfparam name="FORM.name" default="">)

[Irish-Phoenix]

That did it! Thank you! it's all good now. I really appreciate the help! I'm the only coder here and sometimes after looking at code for so long.. get frustrated and need to bounce it off someone else.

Thank you very much!

[BKBK]

No problem. Have fun with the rest of it!

[BKBK]

I mean, of course, your final code for showCaptcha.cfm and contact.cfm.