Skip to main content
I
Irish-Phoenix
Inspiring
September 3, 2016
Answered

Refreshing Captcha with coldfusion

  • September 3, 2016
  • 1 reply
  • 3543 views

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?

    This topic has been closed for replies.
    Correct answer BKBK

    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...


    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="">)

    1 reply

    BKBK
    Community Expert
    BKBKCommunity Expert
    Community Expert
    September 4, 2016

    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>

    I
    Irish-PhoenixAuthor
    Inspiring
    September 4, 2016

    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
    Community Expert
    BKBKCommunity Expert
    Community Expert
    September 4, 2016

    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?

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices