AJAX PHPメールフォーム

Question

PHPメールフォームを作成しようとしています。

は、私はこの方法については好まないが、テキストメッセージが送信されていて、それが新しいページにあなたを送ることである

<?php 
    $name = $_POST['name']; 
    $email = $_POST['email']; 
    $message = $_POST['message']; 
    $from = 'From: '; 
    $to = ''; 
    $subject = 'Contact Form'; 

    $body = "From: $name\n E-Mail: $email\n Message:\n $message"; 


    if ($_POST['submit']) { 
     if (mail ($to, $subject, $body, $from)) { 
      echo '<p>Your message has been sent!</p>'; 
     } else { 
      echo '<p>Something went wrong, go back and try again!</p>'; 
     } 
    } 
?> 

これは私のPHPファイルである

<form method="post" action="PHP/index.php" autocomplete="off"> 
    <fieldset class="singleLine"> 
     <input id="name" type="text" name="name" required> 
     <label for="name">Full Name</label> 
     <div class="after"></div> 
    </fieldset> 
    <fieldset class="singleLine"> 
     <input id="email" type="text" name="email" required> 
     <label for="email">Email</label> 
     <div class="after"></div> 
    </fieldset> 
    <fieldset class="multiLine"> 
     <textarea onkeydown="textAreaAdjust(this)" id="message" type="textarea" name="message" required></textarea> 
     <label for="message" id="messageTop">Message</label> 
     <div class="after"></div> 
    </fieldset> 
    <fieldset> 
     <input id="submit" name="submit" type="submit" value="Submit"> 
     </fielset> 
</form> 

OR：私はそれがこのように働いてい何かが間違っていた。 私はそれをポップアップ/モーダルで実際に作りたいと思います。モーダルは問題ではありません。

Ajaxコールで問題が発生しています。 おそらく私のPHPコードを変更する必要がありますが、その方法はわかりません。誰かが私を助けてくれますか？私はPHPに熟練していません。

これは、AJAX呼び出しと修正された形

function sendMail() { 
    $("#submit").click(function() { 
     var name = $("#name").val(); 
     var email = $("#email").val(); 
     var text = $("#message").val(); 
     var dataString = 'name='+ name + '&email=' + email + '&text=' + text; 


    $.ajax({ 
     url: 'PHP/index.php', 
     type: 'post', 
     data: dataString 
    }) 
     .promise() 
     .done(function (data) { 
      alert("done"); 
     }); 
    }); 
} 

とフォームのための私のJSコードです：

<form autocomplete="off"> 
    <fieldset class="singleLine"> 
     <input id="name" type="text" name="name" required> 
     <label for="name">Full Name</label> 
     <div class="after"></div> 
    </fieldset> 
    <fieldset class="singleLine"> 
     <input id="email" type="text" name="email" required> 
     <label for="email">Email</label> 
     <div class="after"></div> 
    </fieldset> 
    <fieldset class="multiLine"> 
     <textarea onkeydown="textAreaAdjust(this)" id="message" type="textarea" name="message" required></textarea> 
     <label for="message" id="messageTop">Message</label> 
     <div class="after"></div> 
    </fieldset> 
    <fieldset> 
     <div id="submit" name="submit">Submit</div> 
     <!--<input id="submit" name="submit" type="submit" value="Submit">--> 
     </fielset> 
</form> 

Answer 1

は、フォームクラスまたはIDを与えます。

function sendMail() { 
    //bind on the submit of the form 
    $(".myForm").on('submit', function(e) { 
     e.preventDefault(); //cancel the normal form submission 

     $.ajax({ 
      url: 'PHP/index.php', 
      method: 'post', 
      data: $(this).serialize(), //serialize all the inputs of the form for the ajax request 
     }).then(
      function success() { 
       console.log(arguments); 
       //do stuff 
      }, 
      function error() { 
       console.log(arguments); 
       //do stuff 
      } 
     ) 
    }); 
}