I am working on what would appear to be a basic contact form. I am using the ColorBox plugin for jQuery to build a form with an image link, which then opens a ColorBox containing the reCAPTCHA form and the submit button for the form.

This code works perfectly in IE7 upwards, and even works to an extent in IE6, yet in Firefox, Opera and Chrome when I click the submit button it appears to remove the entire page as if it were going through an actual link.

I'm sure I'm making a really silly mistake here somewhere, so could someone have a quick look at my code and see where I'm going wrong? This problem has been bugging me for a while now and it's halting my progress with a lot of other stuff.

EDIT: Silly me! I just realised that I hadn't even included the URL! Here's the shortened one I've been passing around on IRC...


EDIT 2: When the ColorBox is opened the following code is "displayed", according to View Source.

<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha.js"></script><div id="recaptcha_widget_div" style="display:none"></div><script>Recaptcha.widget = Recaptcha.$("recaptcha_widget_div"); Recaptcha.challenge_callback();</script><div id="recaptcha_widget_div" style="display:none"></div><script>Recaptcha.widget = Recaptcha.$("recaptcha_widget_div"); Recaptcha.challenge_callback();</script>
  • Note: I am using similar code to this, which works in all browsers. See "Inline HTML" colorpowered.com/colorbox/core/example5/index.html
    – Mike B
    Commented Sep 10, 2010 at 9:50
  • 3
    I think you'd get a better response over at StackOverflow.com Commented Sep 10, 2010 at 12:39
  • Possibly, but I've noticed similar questions on SO be directed to here, so I thought I'd give this new community a try with a jQuery question as it's a client-side thing.
    – Mike B
    Commented Sep 11, 2010 at 17:04

4 Answers 4


Changing the submit button from type submit to type button will prevent the form from being submitted.


If you click a submit button you'll need to "jam" the default submission behaviour by returning false or using jQuery's preventDefault.

Otherwise have you Captcha handling code trigger from onsubmit on the form.

  • I'm sorry, but I don't understand. I've changed the type from submit to button and I've tried returning false within submit() in onclick, but the problem persists.
    – Mike B
    Commented Sep 10, 2010 at 10:24
  • Say for instance you used jQuery to trap the click event: jsfiddle.net/tfcuA/10 then you can stop the a link moving the client on, show the Captcha and then trap the Captcha submit.
    – Metalshark
    Commented Sep 10, 2010 at 13:36

You can stop the normal event of the click by adding something like this:

$("#linkButtonId").click( function (event){
 event.preventDefault(); event.stopPropagation();
 // things that should happen in this function on click

more info on preventDefault and stopPropagation can be found here

This will prevent the submitting of your form or in my example the click on a link.


I'd tidy the JS up a bit into a single document ready, and move the place where the function showHeader is defined to before where it is called.

However, I think the main problem is being caused by the fact that inside the captcha div you have a script from Google that loads the Captcha content. I've seen something similar in the past with Colorbox and dynamically added content (in that case it was videos).

The solution is to separate the contents of the #recaptcha div into a separate file and let Colorbox inject it into the DOM onclick.

    width: "30%",
    href: "recaptcha.html" //or .php or whatever

Edit: I edited the JSFiddle provided by Metalshark (+1 for jsfiddle - superb resource) to show that your jQuery works fine: http://jsfiddle.net/tfcuA/13/ > This revision simply replaces the recaptcha with some test content that isn't dynamically loaded from elsewhere and it works, suggetsing that that the separation solution ought to work as well.


It turns out that it's a relatively common problem for those using the PHP plugin for reCAPTCHA. I decided to use the plugin code for the server-side part, but manually build the reCAPTCHA form with the given JavaScript and now it works perfectly fine.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.