Как исправить форму Ajax, не представленную после проверки Google невидимым reCAPTCHA - PullRequest
Новая
       10

Как исправить форму Ajax, не представленную после проверки Google невидимым reCAPTCHA

0 голосов
/ 14 апреля 2019

Я пытаюсь добавить невидимую recaptcha на сайт, который в настоящее время использует recaptcha v2.Заполнение формы и нажатие кнопки отправки не имеет проблем.Проблема в том, что после завершения задания страница не перенаправляется в action.php или не отправляется вообще.

Я ищу те же темы здесь.Тема, которую я нашел рядом с моей ситуацией, это Невидимая reCaptcha AJAX Call , но форма все равно не будет продолжаться.

Фактическая тестовая рабочая ссылка Тестовая регистрация

Ниже приведены мои html, js и php коды для справки.

index.html 

<body>
<div id="form-messages"></div>
<div class="signup-form">
<form id="ajax-contact" action="action.php" method="post" enctype="multipart/form-data">
<div class="field-group">
<div class="input-group-icon">Name:</div>
<input type="text" placeholder="Enter name" id="name" name="name" required />
</div>
<div class="field-group">
<div class="input-group-icon">Email:</div>
<input type="email" placeholder="Enter email" id="email" name="email" autocorrect="off" autocapitalize="none" required />
</div>
<div id="interact_btn">
<input class="ghost-submit" id="submit_Btn" type="submit" value="SUBMIT" />
<input class="ghost-reset" id="reset_Btn" type="reset" value="CANCEL" />
</div>
<div class="g-recaptcha" data-sitekey="SITE KEY" data-callback="onSubmit" data-size="invisible">
</div>
</form>
<script src="js/app.js"></script>
<script src="https://www.google.com/recaptcha/api.js"></script>
</body>

app.js 

$(function() {

var form = $('#ajax-contact');
var formMessages = $('#form-messages');
$(form).submit(function(e) {
    e.preventDefault();
    grecaptcha.execute();
});

function onSubmit(token) {

$("#submit_Btn").attr("disabled", true);
$("#reset_Btn").attr("disabled", true);

var formData = $(form).serialize();
formData.push({name: "g-recaptcha-response", value: token});

$(".overlay").show();
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response) {
    $("#submit_Btn").attr("disabled", false);
    $("#reset_Btn").attr("disabled", false);
    $(formMessages).removeClass('error');
    $(formMessages).addClass('success');


    $(formMessages).text(response);
        $(".overlay").hide();

    $('#name').val('');
    $('#email').val('');
})
.fail(function(data) {
    $("#submit_Btn").attr("disabled", false);
    $("#reset_Btn").attr("disabled", false);
    $(formMessages).removeClass('success');
    $(formMessages).addClass('error');

    if (data.responseText !== '') {
        $(formMessages).text(data.responseText);
    } else {
        $(formMessages).text('Oops! An error occured and your message could not be sent.');
    }
    $(".overlay").hide();
    });

    grecaptcha.reset();
}

});

action.php 

if ($_SERVER["REQUEST_METHOD"] == "POST")
{
$url = 'https://www.google.com/recaptcha/api/siteverify';
$privatekey="<SITE KEY>";
$resp=$_POST['g-recaptcha-response'];
$token = $_POST['token'];
if(isset($token) && !empty($token)) { 
       verify=file_get_contents(
        $url.http_build_query([
            'secret' => $privatekey
            'response' => $resp,
        ]).$token
    );

    $captcha_success=json_decode($verify);
}   
if ($captcha_success->success==false) {
    http_response_code(401);
    echo "reCAPTCHA verification failed.";/*These will be displayed on form-messages in index.html*/
}
else
{
  $mail = new PHPMailer;
  /*... phpmailer handling codes ...*/

  if(!$mail->send()) {
    http_response_code(500);
    $error_message .= "Mailer Error: " .$mail->ErrorInfo;
  } 
  else {
    http_response_code(200);
    echo "Thank you! your details are submitted.An email was sent to your email address.";
  }
}

Ожидаемый результат:

Нажмите кнопку «Отправить»> Появится вызов повторной проверки> Проверено> показать наложение при использовании ajax, отправив форму

Текущий результат: Нажмите кнопку "Отправить"> Появится вызов повторной проверки> Проверено> нет оверлея, форма ajax не отправлена ​​

Было бы очень полезно, если бы вы указали, какие частинуждается в улучшении или указать на мои ошибки.любая помощь приветствуется.

1 Ответ

0 голосов
/ 15 апреля 2019

скорее всего это: 

$url.http_build_query([
    'secret' => $privatekey
    'response' => $resp,
]).$token

должно быть: 

$url.http_build_query([
    'secret' => $privatekey
    'response' => $resp,
    'token' => $token
])
...