21 Replies Latest reply on Sep 4, 2016 10:50 AM by BKBK

    Refreshing Captcha with coldfusion

    Irish-Phoenix Level 1

      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?

        • 1. Re: Refreshing Captcha with coldfusion
          BKBK Adobe Community Professional & MVP

          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>

          • 2. Re: Refreshing Captcha with coldfusion
            Irish-Phoenix Level 1

            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.

            • 3. Re: Refreshing Captcha with coldfusion
              BKBK Adobe Community Professional & MVP

              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?

              • 4. Re: Refreshing Captcha with coldfusion
                BKBK Adobe Community Professional & MVP

                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();          

                    });

                })

                • 5. Re: Refreshing Captcha with coldfusion
                  Irish-Phoenix Level 1

                  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?

                  • 6. Re: Refreshing Captcha with coldfusion
                    BKBK Adobe Community Professional & MVP

                    One of those script tags should be sufficient.

                    • 7. Re: Refreshing Captcha with coldfusion
                      BKBK Adobe Community Professional & MVP

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

                      • 8. Re: Refreshing Captcha with coldfusion
                        BKBK Adobe Community Professional & MVP

                        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>

                        • 9. Re: Refreshing Captcha with coldfusion
                          Irish-Phoenix Level 1

                          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?

                          • 10. Re: Refreshing Captcha with coldfusion
                            BKBK Adobe Community Professional & MVP

                            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?

                            • 11. Re: Refreshing Captcha with coldfusion
                              Irish-Phoenix Level 1

                              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?

                              • 12. Re: Refreshing Captcha with coldfusion
                                BKBK Adobe Community Professional & MVP

                                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?

                                • 13. Re: Refreshing Captcha with coldfusion
                                  Irish-Phoenix Level 1

                                  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

                                  • 14. Re: Refreshing Captcha with coldfusion
                                    BKBK Adobe Community Professional & MVP

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

                                     

                                    <cfscript>

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

                                            }

                                       </cfscript>

                                    • 15. Re: Refreshing Captcha with coldfusion
                                      Irish-Phoenix Level 1

                                      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!

                                      • 16. Re: Refreshing Captcha with coldfusion
                                        BKBK Adobe Community Professional & MVP

                                        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?

                                        • 17. Re: Refreshing Captcha with coldfusion
                                          BKBK Adobe Community Professional & MVP

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

                                          • 18. Re: Refreshing Captcha with coldfusion
                                            Irish-Phoenix Level 1

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

                                            • 19. Re: Refreshing Captcha with coldfusion
                                              BKBK Adobe Community Professional & MVP

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

                                              • 20. Re: Refreshing Captcha with coldfusion
                                                Irish-Phoenix Level 1

                                                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!

                                                • 21. Re: Refreshing Captcha with coldfusion
                                                  BKBK Adobe Community Professional & MVP

                                                  No problem. Have fun with the rest of it!