Почему две рекапчи появляются одновременно? - PullRequest
1 голос
/ 13 февраля 2020

У меня две формы в модальном windows на одной странице (авторизация и регистрация). Для обеих форм я подключаю невидимую recaptcha (v2). Вот код инициализации recaptcha:

var idCaptcha1, idCaptcha2;
var onloadReCaptchaInvisible = function () {
    //login
    idCaptcha1 = grecaptcha.render('recaptcha1', {
        "sitekey": "6LfpltgUAAAAAMW3PstNGrEk3pMos0TzN9jyL7mT",
        "callback": "onSubmitReCaptcha1",
        "size": "invisible"
    });
    //reg
    idCaptcha2 = grecaptcha.render('recaptcha2', {
        "sitekey": "6LfpltgUAAAAAMW3PstNGrEk3pMos0TzN9jyL7mT",
        "callback": "onSubmitReCaptcha2",
        "size": "invisible"
    });
};

function onSubmitReCaptcha1(token) {
    alert('test');
    sendForm('signin', idCaptcha1);
}

function onSubmitReCaptcha2(token) {
    sendForm('signup', idCaptcha2);
}

Когда пользователь отправляет какую-либо форму, я пытаюсь выяснить, что форма, и выполнить капчу мне нужно:

$('form').submit(function(event) {
    // отменим отправку форму на сервер
    event.preventDefault();

    switch($(this).closest('.modal').attr('id')){
        case 'signin':
            grecaptcha.execute(idCaptcha1);
        case 'signup':
            grecaptcha.execute(idCaptcha2);
    }

});

Наконец, это код функции отправки формы:

function sendForm(id,captcha){
    alert(id);
    let form = $('#'+id).find('form'),
        url  = form.attr('action'),
        formData = new FormData(form);
    formData.append('g-recaptcha-response', grecaptcha.getResponse(captcha));

    console.log(url);    
    console.log(formData);        
}

Итак, капчи работают нормально, к тому же они оба появляются сразу. Что я сделал не так? Я подозреваю, что проблема в $('form').submit(), но я не могу найти причину.

I attached the screenshot.

1 Ответ

0 голосов
/ 13 февраля 2020

Вы забыли оператор break в конце каждого case. Если вы совпадаете с первым регистром и не имеете break, он проваливается и выполняет следующий регистр, поэтому показываются оба повторных кода.

$('form').submit(function(event) {
    // отменим отправку форму на сервер
    event.preventDefault();

    switch($(this).closest('.modal').attr('id')){
        case 'signin':
            grecaptcha.execute(idCaptcha1);
            break;
        case 'signup':
            grecaptcha.execute(idCaptcha2);
            break;
    }
});
...