У меня две формы в модальном 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.](https://i.stack.imgur.com/W9Kzl.png)