Thursday, September 17, 2009

More than one ReCAPTCHA on a page mixing JQuery and the ReCaptcha Ajax API

I've been working on a page that need to have more than one ReCaptcha since there were multiple contact forms on the page.

What I'm about to share is the solution I've come up with using a combination of JQuery and the Ajax API of ReCaptcha available at http://recaptcha.net/apidocs/captcha/client.html.

First of all, include the following line in the head of your document:

<code>
<script type="text/javascript" src="http://api.recaptcha.net/js/recaptcha_ajax.js"></script> 
</code>

Second, set up your html like the following, making sure that each of your id's are different in the different forms. Mine were dynamic as I'm also using PHP to output the information:

<code>
<input type="button" id="recaptcha_required_1"
onclick="showRecaptcha('recaptcha_div_1', 
'submit_1',
'recaptcha_required_1',
'white');" 
value="Click to Submit" 
class="recaptcha_required" />
<div id="recaptcha_div_1"></div>
<input type="submit" id="submit_1" class="contact_submit" value="Submit" />

</code>

You can do that as many times on the page as you want, as long as the id's are different each time.

Third, in a separate javascript file that you've linked to (make sure that you have the JQuery libraries linked as well).

<code>
$(function() {
$(".contact_submit").hide();
});
function showRecaptcha(element, submitButton, recaptchaButton, themeName) {
  Recaptcha.destroy();
  Recaptcha.create("<insert ReCAPTCHA key here>", element, {
        theme: themeName,
        tabindex: 0,
        callback: Recaptcha.focus_response_field
  });
  $(".contact_submit").hide();
  $(".recaptcha_required").show();
  $("#"+recaptchaButton).hide();
  $("#"+submitButton).show();
  
}

</code>

The first is the JQuery load function to hide all the submit buttons that have the class of "contact_submit." 

The second function (called by the recaptcha_required button), actually creates your ReCAPTCHA area. You'll need a key which you can sign up for at http://www.recaptcha.net.
Since there are multiple forms on the page, you'll need to hide the other submit buttons and recall the other recaptcha_required buttons. Also, we are destroying the previous Recaptcha widget so as to not cause confusion.
We also hide the recaptcha_required button and show the main submit button.

I plan on implementing a JQuery ajax submit process, but I'm not going into detail on that here. Have fun and let me know if you have any questions or if there might be a way to make it better. 

I think this is a regular elegant way to have multiple copies of the ReCAPTCHA solution on one page, if you so need it. Plus, you get to help digitize books in the process.

Posted via email from God at the Center quick postings

5 comments:

  1. Is possible keep visible two recaptcha images?
    In my page I display the first image, then if I click a button Where I call the other picture one, the first is hidden.
    Hope I had explained -my english in not very good-

    ReplyDelete
    Replies
    1. Anonymous5:47 AM

      No it is not possible use recapcha on sigle page two times.

      see this
      http://stackoverflow.com/questions/1241947/how-do-i-show-multiple-recaptchas-on-a-single-page

      Delete
    2. Actually, if you scroll down you'll see multiple ways to achieve it.

      Delete
  2. Good site mate, thanks. Although I found a marginally easier way to do it when toggling the visibility of forms, technically there is only ever one form visible at any one time, so I just got the form to be populated by a hidden captcha div from the footer. Simple. :)

    ReplyDelete
  3. Thank you so much! I really needed this :)

    ReplyDelete

I will approve comments on this blog, but I am not posting anymore posts on this one. Please visit http://inklingsofreality.blogspot.com for my latest blog.