javascript/Google recaptchaからphpファイルを呼び出す

Question

私の質問に対する答えが明白な場合は、多くのお詫び申し上げます。

私は自分のウェブサイトにGoogle reCaptchaを組み込もうとしています。

これは私のページのHEAD内のJavaScriptで：

var onSubmit = function(token) { 
    $.ajax({ 
     type: 'POST', 
     url: 'assets/php/contact.php', 
     success: function(){ 
     alert('Thank you for your request ' + document.getElementById('name').value); 
     } 
    }); 
    }; 

reCAPTCHAのが見えると作業です。

上記のコードは私に 'success:'という結果を与えていますが、phpファイルの呼び出しを使用してフォームを処理していません。

他のすべてのスクリプトが正常に動作しています。ここで

はcontact.phpコードです：

私は自分のコードにこれらの変更を加えました。しかし結果に変化はない。ここでは、PHPファイルのコードは次のとおりです。

<?php 
    //contact form submission code 

    //Validate data on the form 
    // define variables and set to empty values 
    $name = $email = $message = ""; 

    if ($_SERVER["REQUEST_METHOD"] == "POST") { 
    $name = contact_input($_POST["name"]); 
    $email = contact_input($_POST["email"]); 
    $message = contact_input($_POST["message"]); 
    } 

    function contact_input($data) { 
    $data = trim($data); 
    $data = stripslashes($data); 
    $data = htmlspecialchars($data); 
    return $data; 
    } 
    // if the url field is empty 
if(isset($_POST['url']) && $_POST['url'] == ''){ 
    // put your email address here 
    $youremail = 'my@email.co.uk'; 
    // prepare a "pretty" version of the message 
    // Important: if you added any form fields to the HTML, you will need to add them here also 
    $body = "Contact Form from Wilderness Canoe website just submitted: 
    Name: $_POST[name] 
    E-Mail: $_POST[email] 
    Message: $_POST[message]"; 
    // Use the submitters email if they supplied one 
    // (and it isn't trying to hack your form). 
    // Otherwise send from your email address. 
    if($_POST['email'] && !preg_match("/.+@.+\..+/i", $_POST['email'])) { 
    $headers = "From: $_POST[email]"; 
    } else { 
    $headers = "From: $youremail"; 
    } 
    // finally, send the message 
    mail($youremail, 'Contact Form', $body, $headers); 
} 

?> 

とフォームのコード：

<form id="form" method="post" action="assets/php/contact.php" onsubmit="return validate();"> 
     <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
     <i class="zmdi zmdi-account mdc-text-light-blue zmdi-hc-2x txtfields"></i> 
     <label class="mdl-textfield__label" for="name"> Full Name</label> 
     <input class="mdl-textfield__input " type="text" id="name" required name="name"> 
     <!--error msg ><span class="mdl-textfield__error">Only alphabet and no spaces, please!</span--> 
     </div> 
     <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
     <i class="zmdi zmdi-email mdc-text-light-blue zmdi-hc-2x txtfields"></i> 
     <label class="mdl-textfield__label" for="email">Your Email</label> 
     <input class="mdl-textfield__input " type="text" id="email" required name="email"> 
     <!--error msg ><span class="mdl-textfield__error">Valid email only, please!</span--> 
     </div> 
     <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
     <i class="zmdi zmdi-comment-text mdc-text-light-blue zmdi-hc-2x txtfields"></i> 
     <label class="mdl-textfield__label" for="message">Your Message/Comment</label> 
     <textarea class="mdl-textfield__input " type="text" rows= "1" max-rows="4" id="message" name="message"></textarea> 
     </div> 

     <!-- antispam --><p class="antispam">Leave this empty: <input type="text" name="url" /></p> 

     <!-- RECAPTCHA --> 
     <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script> 

     <div class="clear"><button type="submit" value="Send" name="submit" id="mc-embedded-contact" class="send">Submit</button></div> 
    </form> 

完全ジャバスクリプト：

<script type="text/javascript"> 

     var onSubmit = function(token) { 
     var formData = $("#form").serialize(); 
     $.ajax({ 
      type: 'POST', 
      data: formData, 
      url: 'assets/php/contact.php', 
      success: function(){ 
      alert('Thank you for your request ' + document.getElementById('name').value); 
      } 
     }); 
     }; 

     var onloadCallback = function() { 
     grecaptcha.render('mc-embedded-contact', { 
      'sitekey' : '6Ldbfg8UAAAAAAaWVBiyo4uGfDqtfcnu33SpOj6P', 
      'callback' : onSubmit 
     }); 
     }; 
    </script> 

Answer 1

あなたのAjaxのリクエストが任意の形式のデータを送信するdoesntのあなたのコード。フォームデータを次のように追加する必要があります。

var onSubmit = function(token) { 
    var formData = $("#yourFormId").serialize(); 

    $.ajax({ 
    type: 'POST', 
    data: formData, 
    url: 'assets/php/contact.php', 
    success: function(){ 
     alert('Thank you for your request ' + document.getElementById('name').value); 
    } 
    }); 
};