Form submit and recaptcha

Question

What is wrong with this code ?

 $(function() {
            $('#my_form').submit(function(e) {
                e.preventDefault();
                recaptcha_response_field = $('input#recaptcha_response_field').val();
                recaptcha_challenge_field = $('input#recaptcha_challenge_field').val();

                $.post('controller.php', {recaptcha_response_field : recaptcha_response_field, recaptcha_challenge_field : recaptcha_challenge_field}, function(data) {
                if(data == 0) {
                    alert('no');
                } else {
                    alert('submit')
                    $('#my_form').submit();
                }
            }); 
            })
        });

I use recaptcha in my form. When the user entered correctly the captcha code these lines of code are executed

alert('submit')
$('#my_form').submit();

So fat so good. The problem is that the form is not getting to submit. I think this line of code is executed again

$('#my_form').submit(function(e) {

Any suggestions ?

Use a global flag (boolean var) to indicate whether you can submit the form or not. — Reinstate Monica Cellio, Nov 23 '12 at 10:06
@soderslatt That will probably work, but it's better to use `preventDefault()` in most cases if I'm not mistaken: http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false — rink.attendant.6, Nov 23 '12 at 10:11
@rink.attendant.6 your're right, preventDefault() is a probarbly a better choice in this case — anderssonola, Nov 23 '12 at 10:12

ZKK · Answer 1 · 2013-02-06T13:26:21.673

1

You can unbind it after all the verfication using

$('#my_form').unbind('submit');

Then submit it regularly using

$('#my_form').submit();

edited Feb 06 '13 at 13:26

answered Feb 06 '13 at 13:09

ZKK

531
3
10

rink.attendant.6 · Answer 2 · 2012-11-23T10:14:26.457

0

I haven't tested this out yet, but try this. You're right that the .submit function is being triggered again.

$(function() {
    $('#my_form').submit(function(e) {
        'use strict';

        var recaptcha_response_field = $('input#recaptcha_response_field').val(),
            recaptcha_challenge_field = $('input#recaptcha_challenge_field').val(),
            submitForm = true;

        $.post('controller.php', {
                recaptcha_response_field : recaptcha_response_field,
                recaptcha_challenge_field : recaptcha_challenge_field
            }, function(data) {
                if(data == 0) {
                    submitForm = false;
                }
        }); 

        if(!submitForm) {
            e.preventDefault();
        }
    })
});

edited Nov 23 '12 at 10:14

answered Nov 23 '12 at 10:08

rink.attendant.6

44,500
61
101
156

1

This won't work as intended. You're trying to `e.preventDefault()` in an async AJAX callback. The form will perform its default submission event before that happens. – Matt Stone Nov 23 '12 at 10:11
1

@MattStone Fixed...I think. – rink.attendant.6 Nov 23 '12 at 10:13

Form submit and recaptcha

2 Answers2