使用JQuery的reCAPTCHA问题

时间:2014-05-05 07:48:18

标签: php jquery recaptcha

我很难进行这种reCAPTCHA集成。

到目前为止,这是我的代码:

HTML

<div class="form_contact">
    <form id="form1" name="form1" method="post" action="#">

    <div>
          <label for="name">Name:</label>
          <input type="text" name="name" id="name" value="" tabindex="1" placeholder="*Required Field" />
    </div>

    <div>
          <label for="name">E-mail address:</label>
          <input type="email" name="email" id="email" value="" tabindex="2" placeholder="*Required Field" />
    </div>

    <div>
          <label for="name">Message Subject:</label>
          <input type="text" name="msgTitle" id="msgTitle" value="" tabindex="3" placeholder="*Required Field" />
    </div>

    <div>
          <label for="textarea">Message:</label>
          <textarea cols="40" rows="8" name="message" id="message" tabindex="4" placeholder="*Required Field"></textarea>
        </div>

    <div>                   
          <label for="textarea">Spam Blocker:</label>

                <div class="captcha">                           
            <?php
                  require_once('recaptchalib.php');
                  $publickey = "**********************************";
                  echo recaptcha_get_html($publickey);
                ?>
        </div>                      

        <a class="myButton" tabindex="5" id="submit" name="submit" href="#">&nbsp;&nbsp;Submit&nbsp;&nbsp;<i class="fa fa-chevron-circle-right fa-2x"></i></
    </form>                 
</div>

JQuery的

<script>
    $(function(){
        $('.myButton').click(function() {
            var data= {
             name: $("#name").val(),
             email: $("#email").val(),
             msgTitle: $("#msgTitle").val(),
             message: $("#message").val()
             };


            $.ajax({
             type: "POST",
             url: "mail.php",
             data: data,
             success: function(data){
                    console.log(data);
                 }
            });

            alert('Message Sent!');
            return false;
             });            
    });                 
</script>

MAIL.php

<?php

require_once('recaptchalib.php');
  $privatekey = "*******************";
  $resp = recaptcha_check_answer ($privatekey,
                                $_SERVER["REMOTE_ADDR"],
                                $_POST["recaptcha_challenge_field"],
                                $_POST["recaptcha_response_field"]);

  if (!$resp->is_valid) {
        die ("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
         "(reCAPTCHA said: " . $resp->error . ")");
  } else {
    $mailto = 'sample@example.com';
    $nameField = $_POST['name'];
    $emailField = $_POST['email'];
    $emailSubject = $_POST['msgTitle'];
    $messageField = $_POST['message'];

    $body = <<<EOD
    <br><hr><br>
    Name: $nameField <br>
    Email: $emailField <br>
    Message: $messageField <br>
    EOD;

    $headers = "From: $emailField\r\n"; // This takes the email and displays it as who this email is from.
    $headers .= "Content-type: text/html\r\n"; // This tells the server to turn the coding into the text.
    $success = mail($mailto, $emailSubject, $body, $headers); // This tells the server what to send.

    echo 'message sent!';

  }
?>

如果reCAPTCHA输入不正确,我只想在<form>下面显示错误消息。

提前致谢。!

2 个答案:

答案 0 :(得分:1)

看起来像一个jQuery问题,你可以在表单下面创建一个占位符来推送所有错误:

</form>
<div id="errors"></div>

在您的AJAX成功通话中执行:

success: function(data){
         //clean it in case of multiple attempts
         $('#errors').html(data);
 }

.html() 粘贴从服务器发送的数据。

答案 1 :(得分:1)

从上面的答案中我只想添加此代码,如果你想从后端返回callback

    die ("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
     "(reCAPTCHA said: " . $resp->error . ")");

然后您可能希望将die更改为echo,如下所示:

      echo "The reCAPTCHA wasn't entered correctly. Go back and try it again." .
     "reCAPTCHA said: " . $resp->error . "";

然后它应该是:

     $.ajax({
         type: "POST",
         url: "mail.php",
         data: data,
         success: function(data){
                $('#errors').html(data)
             }
        });