Изменяя размер формы страницы, нужно заставить recaptcha работать на каждом. Я зацикливаюсь на формах капчи, я не могу понять, как зациклить атрибуты data-callback - PullRequest
0 голосов
/ 17 июня 2019

На моих страницах мне нужно различное количество форм, на которых все должны иметь Google ReCaptcha.

У меня есть функция, которая выводит формы, которые я вызываю через и т. д.

Затем я перебираю элементы формы на своей странице в javascript и генерирую прослушиватель событий для каждой отправки в каждой форме, это прекрасно работает.

После запуска grecaptcha.execute () он ищет атрибут data-callback, чтобы найти функцию для отправки формы.

Моя проблема в том, что я не могу найти способ перебрать каждую форму и программно сгенерировать функцию обратного вызова данных.

Я попытался написать цикл for, который генерирует функцию обратного вызова данных, но я не могу ее решить.

Я пытался создать объект с некоторыми переменными, но не могу соединить точки:

 var formSubmitObj = {
    formSubmit0: function() { document.getElementById('formSubmit-0').submit(); },
    formSubmit1: function() { document.getElementById('formSubmit-1').submit(); },
    formSubmit2: function() { document.getElementById('formSubmit-2').submit(); }
};

let formNo = 2;

formSubmitObj['formSubmit' + formNo]();


<form action="mailer.php" method="post" id="myForm-<?php echo $position ?>">
<div class="g-recaptcha" 
   data-sitekey="xxxxxxxx"
   data-size="invisible"
   data-callback="formSubmit-<?php echo $position ?>">
</div>
 <label for="name">Name</label>
 <input type="text" name="name" required>
 <label for="email">Email</label>
 <input type="text" name="email" required>
 <button type="submit">submit form <?php echo $position ?></button>
</form>  


function form($position){
    include ('form.php');
}


const forms = document.querySelectorAll('form');

for (let i = 0; i < forms.length; i++) {
     forms[i].addEventListener('submit', function() {
         event.preventDefault();
         grecaptcha.reset();
         grecaptcha.execute();
     });

 }
...