Как заставить reCaptcha работать с ajax .load - PullRequest
Новая
       9

Как заставить reCaptcha работать с ajax .load

0 голосов
/ 21 января 2019

Я хочу использовать reCaptcha с функцией jjery '.load' ajax, чтобы информация передавалась в мою контактную форму PHP. Я установил, как отправлять через такие вещи, как значение имени, значение темы и т. Д. С помощью этого метода, однако я не уверен, как передавать информацию reCaptcha.

В настоящее время, когда я отправляю форму, я получаю сообщение об ошибке PHP, сообщающее «Неопределенный индекс: g-recaptcha-response». Я полагаю, что это связано с аспектом Ajax.

Любая помощь по этому вопросу была бы удивительной, так как я в полной растерянности!

JQuery: 

$("#contactForm").submit(function(event) {
  event.preventDefault();
  var name = $("#name").val();
  var email = $("#email").val();
  var subject = $("#subject").val();
  var phone = $("#phone").val();
  var company = $("#company").val();
  var message = $("#message").val();
  var submit = $("#submit").val();

$(".form-message").load("contactForm.php", {
   name: name,
   email: email,
   subject: subject,
   phone: phone,
   company: company,
   message: message,
   submit: submit
});

PHP: 

if(isset($_POST['submit'])) {

 require 'dist/PHPMailer/PHPMailerAutoload.php';
 $mail = new PHPMailer;

 $name = $_POST['name'];
 $email = $_POST['email'];
 $subject = $_POST['subject'];
 $phone = $_POST['phone'];
 $company = $_POST['company'];
 $message = $_POST['message'];
 $secretKey = "--KEY--";
 $responseKey = $_POST['g-recaptcha-response'];
 $userIP = $_SERVER['REMOTE_ADDR'];

 $url = "https://www.google.com/recaptcha/api/siteverify?secret=$secretKey&response=$responseKey&remoteip=$userIP";
$response = file_get_contents($url);

 $mail->HOST = 'smtp.gmail.com';
 $mail->Port = 587;
 $mail->SMTPAuth = true;
 $mail->SMTPSecure = 'tls';
 $mail->Username = '--username--';
 $mail->Password = '--password--';

 $mail->setFrom('--email--', 'Contact Form Submission');
 $mail->addAddress('--email--');
 $mail->addReplyTo($email, $name);

 $mail->isHTML(true);
 $mail->Subject= $subject;
 $mail->Body='<p>Name: '.$name. '<br>Email: '.$email.'<br>Subject: '.$subject.'<br>Phone: '.$phone.'<br>Company: '.$company.'<br>Message: '.$message.'</p>';

HTML: 

<form method="POST" action="contactForm.php" id="contactForm">
    <div class="form-group">
      <input
        type="text"
        id="name"
        name="name"
        class="form-control"
        placeholder="Full Name"
      />
    </div>
    <div class="form-group">
      <input
        type="text"
        id="email"
        name="email"
        class="form-control"
        placeholder="Email Address"
      />
    </div>
    <div class="form-group">
      <input
        type="text"
        id="subject"
        name="subject"
        class="form-control"
        placeholder="Subject"
      />
    </div>
    <div class="form-group">
      <input
        id="phone"
        type="text"
        name="phone"
        class="form-control"
        placeholder="Phone (optional)"
      />
    </div>
    <div class="form-group">
      <input
        id="company"
        type="text"
        name="company"
        class="form-control"
        placeholder="Company (optional)"
      />
    </div>
    <div class="form-group">
      <textarea
        class="form-control"
        id="message"
        name="message"
        placeholder="Message"
        style="height: auto"
        rows="5"
      ></textarea>
    </div>
    <div
      class="g-recaptcha"
      data-sitekey="--KEY--"
    ></div>
    <input
      id="submit"
      type="submit"
      value="Submit"
      class="btn btn-outline-primary btn-block mb-3"
      name="submit"
    />
  </form>

1 Ответ

0 голосов
/ 21 января 2019

Вы можете использовать метод grecaptcha.getResponse () , чтобы получить значение капчи со стороны клиента, а затем отправить это значение с помощью ajax / jquery 

<script type="text/javascript">


    ("#contactForm").submit(function(event) {
  event.preventDefault();
  var name = $("#name").val();
  var email = $("#email").val();
  var subject = $("#subject").val();
  var phone = $("#phone").val();
  var company = $("#company").val();
  var message = $("#message").val();
  var submit = $("#submit").val();
  var captcha = grecaptcha.getResponse(); //get captcha

$(".form-message").load("contactForm.php", {
   name: name,
   email: email,
   subject: subject,
   phone: phone,
   company: company,
   message: message,
   submit: submit,
   captcha : captcha
}); 


</script>

Тогда ваш php 

<?php


if(isset($_POST['submit'])) {

 require 'dist/PHPMailer/PHPMailerAutoload.php';
 $mail = new PHPMailer;

 $name = $_POST['name'];
 $email = $_POST['email'];
 $subject = $_POST['subject'];
 $phone = $_POST['phone'];
 $company = $_POST['company'];
 $message = $_POST['message'];
 $secretKey = "--KEY--";
 $responseKey = $_POST['captcha']; //captcha
 $userIP = $_SERVER['REMOTE_ADDR'];

 $url = "https://www.google.com/recaptcha/api/siteverify?secret=$secretKey&response=$responseKey&remoteip=$userIP";
$response = file_get_contents($url);

 $mail->HOST = 'smtp.gmail.com';
 $mail->Port = 587;
 $mail->SMTPAuth = true;
 $mail->SMTPSecure = 'tls';
 $mail->Username = '--username--';
 $mail->Password = '--password--';

 $mail->setFrom('--email--', 'Contact Form Submission');
 $mail->addAddress('--email--');
 $mail->addReplyTo($email, $name);

 $mail->isHTML(true);
 $mail->Subject= $subject;
 $mail->Body='<p>Name: '.$name. '<br>Email: '.$email.'<br>Subject: '.$subject.'<br>Phone: '.$phone.'<br>Company: '.$company.'<br>Message: '.$message.'</p>';
...