Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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

http://is.gd/f3M2s

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>
share|improve this question
    
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 Sep 10 '10 at 9:50
3  
I think you'd get a better response over at StackOverflow.com –  DisgruntledGoat Sep 10 '10 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 Sep 11 '10 at 17:04
add comment

4 Answers

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

http://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.

share|improve this answer
    
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 Sep 10 '10 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 Sep 10 '10 at 13:36
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
add comment
up vote 0 down vote accepted

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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