: Broken jQuery/CSS in Firefox - ColorBox and reCAPTCHA 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

@Samaraweera270

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.

Vote Up Vote Down

@Sims2060225

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.

$("a.captcha").colorbox({
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: 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.

Vote Up Vote Down

@Nimeshi995

Changing the submit button from type submit to type button will prevent the form from being submitted.
jsfiddle.net/tfcuA/
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.

Vote Up Vote Down