Невидимая ошибка reCAPTCHA отправляет все формы на страницу - PullRequest
0 голосов
/ 29 августа 2018

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

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

Я проверил, что нет столкновений с именами или идентификаторами, но я в растерянности.

Есть идеи? Это внизу этой страницы онлайн: https://www.podeals.com/iona

Вы увидите, что, когда вы нажмете кнопку submit, она также отправит форму регистрации Mailchimp: (

Вот мой код;

<script src='https://www.google.com/recaptcha/api.js' async defer></script>
<form action="/cgi-bin/mailer.pl" id="iona-enquiry" method="post" target="_self" name="iona-enquiry">
    <div class="nx-row">
        <div class="nx-c4">
            <label for="">Title</label>
            <span class="nx-select basket-wrap">
                <select name="title" id="title" class="nx-component nx-select">
                    <option value="" selected>Select</option>
                    <option value="Mr">Mr</option>
                    <option value="Mrs">Mrs</option>
                    <option value="Ms">Ms</option>
                    <option value="Miss">Miss</option>
                </select>
            </span>
        </div>
        <div class="nx-c4">
            <label for="firstname">First Name</label>
            <input type="text" value="" name="firstname" id="firstname" placeholder="First Name" required>
        </div>
        <div class="nx-c4">
            <label for="lastname">Last Name</label>
            <input type="text" value="" name="lastname" id="lastname" placeholder="Last Name" required>
        </div>
    </div>
    <div class="nx-row">
        <div class="nx-c6">
            <label for="email" class="">Email</label>
            <input type="email" name="email" id="email" placeholder="Enter email" class="nx-required" required>
        </div>
        <div class="nx-c6">
            <label for="phone" class="">Phone</label>
            <input type="tel" name="call" id="phone" placeholder="Enter Phone Number" class="nx-required" required>
        </div>
    </div>
    <div class="nx-row">
        <div class="nx-c12">
            <div class="recaptcha-center">
<script>
    jQuery('#iona-enquiry').submit(function (event) {
event.preventDefault();
grecaptcha.reset();
grecaptcha.execute();
});

   function formSubmit(response) {
     document.getElementById("iona-enquiry").submit();
   }
 </script>

<div class="g-recaptcha" data-sitekey="6LcccWoUAAAAANCtIyB8fGIwb3BO5H28xDPtsngG" data-callback="formSubmit" data-badge="inline" data-size="invisible"></div>
            </div>

            <input id='submit' type="submit" value="Advance Register" class="nx-btn nx-btn--primary nx-btn--arrowhover">

            <input type="hidden" value="thanks" name="redirect" />
            <input type="hidden" name="mailerid" value="5" />
            <input type="hidden" name="enquiry" id="enquiry" value="Iona Pre Reg" />
            <input type="hidden" name="affiliate" id="affiliate" value="[INC:displayphoneno("201")]" /> 
        </div>
    </div>
</form>
...