PHP関数をAJAXでリロードせずに実行する

Question

この質問は多くの質問がされていますが、私は問題を解決できません。 私はページをリロードせずにPHP関数を実行したいと思います。なぜこれは機能しませんか？ phpファイルはindexTest.phpです。

ページが上にスクロールしていて、何も機能しません。

私はAJAXを初めて使っているので、何をすべきか分かりません。

HTML：

<script type="text/javascript"> 

     function submitdata() 
     { 
     var nameForm=document.getElementById("nameForm"); 
     var emailForm=document.getElementById("emailForm"); 
     var messageForm=document.getElementById("messageForm"); 

     $.ajax({ 
      type: 'post', 
      url: 'indexTest.php', 
      data: { 
      name:nameForm, 
      email:emailForm, 
      message:messageForm 
      }, 
     }); 

     return false; 
     } 
</script> 

<form onsubmit="return submitdata()" method="POST" id="contactForm"> 
        <input spellcheck="false" class="first" type="text" name="name" placeholder="name" id="nameForm"> 
        <input spellcheck="false" class="first" type="text" name="email" placeholder="email" id="emailForm"> 
        <textarea rows="8" spellcheck="false" class="last" type="text" name="message" placeholder="message" id="messageForm"></textarea> 
        <input type="submit" name="submit" value="" id="button">  
       </form> 

PHP：

<?php 
if(isset($_POST['submit'])){ 
    $to = "*"; // this is your Email address 
    $from = $_POST['email']; // this is the sender's Email address 

    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { 
     echo "Invalid email format"; 
    }; 

    $first_name = $_POST['name']; 
    $subject = "Form submission"; 
    $subject2 = "Copy of your form submission"; 
    $message = "Email from: " . $from . "\n\n" . $first_name . " wrote the following:" . "\n\n" . $_POST['message']; 
    $message2 = "Here is a copy of your message " . $first_name . "\n\n" . $_POST['message']; 

    $headers = "From:" . $from; 
    $headers2 = "From:" . $to; 
    mail($to,$subject,$message,$headers); 
    mail($from,$subject2,$message2,$headers2); // sends a copy of the message to the sender 

    echo '<script language="javascript">'; 
    echo 'alert("message successfully sent")'; 
    echo '</script>'; 

    // You can also use header('Location: thank_you.php'); to redirect to another page. 
    } 

?> 

Answer 1

問題は、あなたが実際にAJAXを通じて投稿したいときに、フォーム自体によって掲示されていることです。基本的には、JavaScript関数をonsubmitで呼び出しているため、JavaScriptはで実行され、デフォルトのフォーム送信になります。あなたがする必要がどのような

はe.preventDefault();と無効に既定のフォーム送信され、その後、代わりにをJavaScriptのを実行します。

$("#contactForm").submit(function(e) { 
    e.preventDefault(); 
    submitdata(); 
}); 

は、この情報がお役に立てば幸い！ :)