varをajax経由でPHPに渡しますか？

Question

私はPHPファイルに値を渡そうとしています。私は、フォームが送信されたが、何もPHPファイルに表示されていないことを警告しています。私はjs変数をチェックし、正しく表示しています。これは私のHTMLフォームです。

      <form name="sentMessage"role="form" data-toggle="validator" id="ContactForm" onsubmit="myFunction()"> 
           <div class="form-group has-feedback"> 
            <input type="text" pattern="^[_A-z ]{1,}$" class="form-control" placeholder="Your Name *" name="name" id="Username" 
            data-error="Plese enter your name" required> 
            <span class="glyphicon form-control-feedback" aria-hidden="true"></span> 
            <span class="help-block with-errors"></span> 

           </div> 

           <div class="form-group has-feedback"> 
            <input type="email" class="form-control" placeholder="Your Email *" name="email" id="Useremail" required data-validation-required-message="Please enter your email address."> 
            <span class="glyphicon form-control-feedback" aria-hidden="true"></span> 
            <span class="help-block with-errors"></span> 

           </div> 
           <div class="form-group has-feedback"> 
            <input type="tel" pattern="^[_0-9 ]{1,}$" class="form-control" placeholder="Your Phone *" name="phone" id="Userphone" required data-validation-required-message="Please enter your phone number."> 
            <span class="glyphicon form-control-feedback" aria-hidden="true"></span> 
            <span class="help-block with-errors"></span> 
           </div> 
           <div class="form-group"> 
            <textarea class="form-control" placeholder="Your Message *" name="message" id="Usermesage" required data-validation-required-message="Please enter a message."></textarea> 

            <p class="help-block text-danger"></p> 
            <label class="light"> 
           </div> 


           <button type="submit" class="btn btn-xl btn-success"> 
            Send Message 
           </button> 
         </div> 
         </form> 

<script> 
      function myFunction() { 
       var name = document.getElementById("Username").value; 
       var email = document.getElementById("Useremail").value; 
       var phone = document.getElementById("Userphone").value; 
       var message = document.getElementById("Usermesage").value; 

       $.ajax({ 
        type: 'POST', 
        url: 'mailer.php', 
        data: {'name': name, 'email':email,'phone':phone,'message':message}, 
        success: function(){ 
        alert("The form was submitted"); 
       } 
       }); 


      } 
    </script> 

PHPファイルmailer.php

<?php 
if($_POST){ 
echo $name = $_POST['name']; 
echo $email = $_POST['email']; 
echo $phone = $_POST['phone']; 
echo $message = $_POST['message']; 


} 

?> 

何がPHPファイルに表示されません。ありがとうございました

Answer 1

2つの考え方 - 通常のフォーム送信を介してフォームを送信し、AJAX呼び出しで同じフォームを送信しようとしていますか？これは、AJAXコールがすでに提出されているため、AJAXコールに値を与えません。通常のフォームの送信を防ぐ必要があるかもしれません.AJAX関数までフォームが送信されるのを防ぐのに役立つたくさんの答えがあります。

2番目 - フォームの中から送信ボタンを削除し、type = "button"属性を与え、onclickイベントハンドラとajax呼び出しを結合します（serialize（） 。特に各入力の値を取得していなくて、フォームからのすべての関連データを収集する方法： -

//html 
    <button id="submitFormButton" type="button" class="btn btn-primary">Submit</button> 

//js 
$('#submitFormButton').click(function(){ 
    var formData = $('#contactForm').serialize(); 
    var URL = 'mailer.php'; 
     $.post(URL, formData,function(data) { 
     //function to perfrom on the returned data 
     }); 
});