ページリロードのないPHPでフォームデータを送信していますか？

Question

友人の助けを借りてPHPで作成した私の個人的なポートフォリオWebページ上の連絡フォームを持っています（私はPHPに関してはダミーです）。

私は問題があります。送信ボタンが押され、メールが送信されるたびに、ページがリロードされます。どうすればこの問題を解決できますか？

私がまたは内容を変更することは考えていないので、私は、コピーされた（と個人的なものを変更）すべての私のフォームました：私は、スニペットは十分あると思います

<?php 
 
    // define variables and set to empty values 
 
    $nameErr = $emailErr = $commentErr = $subject = ""; 
 
    $name = $email = $comment = $subject = ""; 
 

 
    if ($_SERVER["REQUEST_METHOD"] == "POST") { 
 
     if (empty($_POST["name"])) { 
 
     $nameErr = "Name is required"; 
 
     } else { 
 
     $name = input($_POST["name"]); 
 
     } 
 

 
     if (empty($_POST["email"])) { 
 
     $emailErr = "Email is required"; 
 
     } else { 
 
     $email = input($_POST["email"]); 
 
     // check if e-mail address is well-formed 
 
       if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { 
 
       $emailErr = "Invalid e-mail format"; } 
 
     } 
 

 
     if (empty($_POST["subject"])) { 
 
     $subjectErr = "Subject is required"; 
 
     } else { 
 
     $subject = input($_POST["subject"]); 
 
     } 
 

 
     if (empty($_POST["comment"])) { 
 
     $commentErr = "Comment is required"; 
 
     } else { 
 
     $comment = input($_POST["comment"]); 
 
     } 
 
} 
 

 
// MailGun cURL API // 
 
    $curl_post_data=array(
 
    'from' => "$name <$email>", 
 
    'to'  => 'my@mail.com', 
 
    'subject' => $subject, 
 
    'text' => $comment, 
 
); 
 

 
    $service_url = 'mailgunlink.com'; 
 
    $curl = curl_init($service_url); 
 
    curl_setopt($curl, CURLOPT_HTTPAUTH, CURLAUTH_BASIC); 
 
    curl_setopt($curl, CURLOPT_USERPWD, "api:key-123456789123456789abc"); 
 

 
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); 
 
    curl_setopt($curl, CURLOPT_POST, true); 
 

 
    curl_setopt($curl, CURLOPT_POSTFIELDS, $curl_post_data); 
 
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false); 
 

 

 
    $curl_response = curl_exec($curl); 
 
    $response = json_decode($curl_response); 
 
    curl_close($curl); 
 

 

 

 
// trim // 
 
    function input($data) { 
 
     $data = trim($data); 
 
     $data = stripslashes($data); 
 
     $data = htmlspecialchars($data); 
 
     return $data; 
 
    } 
 

 
?> 
 

 
    <section id="kontaktformular"> 
 
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post"> 
 
    <div class="row" id="kontakt"> 
 
    <div class="six columns"> 
 
     <label>Full Name <span class="error">*<?php echo $nameErr;?></span></label> 
 
     <input class="u-full-width" type="text" placeholder="Peter" name="name" id="navn"> 
 

 
    </div> 
 
    <div class="six columns"> 
 
     <label>Your Email <span class="error">*<?php echo $emailErr;?></span></label> 
 
     <input class="u-full-width" type="email" placeholder="Peter@Example.com" name="email" id="email"> 
 

 
    </div> 
 

 
    <label>Subject <span class="error">*<?php echo $subjectErr;?></span></label> 
 
    <input class="u-full-width" type="text" placeholder="Design" name="subject" id="subject"> 
 

 
    <label>Message <span class="error">*<?php echo $commentErr;?></span></label> 
 
    <textarea class="u-full-width" placeholder="Whatever..." name="comment" id="besked"></textarea> 
 

 
    </label> 
 
    <input class="button-primary change" type="submit" value="Send"> 
 
    </div> 
 
</form> 
 
    </section>

を、このように乱雑に見えますが。 さらに詳しい情報が必要な場合は、私にそれを叫ぶように自由に感じてください。

また、おまけ質問。フォームを非表示にするには送信ボタンが必要です（表示：なし - > #kontaktformular）。別のdivを表示する（表示：ブロック; - > #feedbackmsg）

ありがとうございます！最初の質問が最も重要です！

Answer 1

私はこの質問がすでに尋ねられ、複数回答を得ていることは間違いありません。いずれにしても、AJAXを使用する必要があります.AJAXはかなりシンプルで、それを実行する方法が1つあります。

<section id="kontaktformular"> 
    <form id="kontaktform" method="post"> 
    <div class="row" id="kontakt"> 
     <div class="six columns"> 
     <label>Full Name <span class="error">*</span></label> 
     <input class="u-full-width" type="text" placeholder="Peter" name="name" id="navn"> 

     </div> 
     <div class="six columns"> 
     <label>Your Email <span class="error">*</span></label> 
     </div> 
     <label>Subject <span class="error">*</span></label> 
     <input class="u-full-width" type="text" placeholder="Design" name="subject" id="subject"> 
     <label>Message <span class="error">*</span></label> 
     <textarea class="u-full-width" placeholder="Whatever..." name="comment" id="besked"></textarea> 

     </label> 
     <input id="kontaktform_input" class="button-primary change" type="submit" value="Send"> 
    </div> 
    </form> 
</section> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script type="text/javascript"> 
$("#kontaktform").submit(function(e) { 
    e.preventDefault(); // avoid to execute the actual submit of the form. 
    $.ajax({ 
     type: "POST", 
     data: $(this).serialize(), // serializes the form's elements. 
     success: function(data) 
     { 
     } 
     }); 
}); 
</script> 

Answer 2

はいAJAXを使用すると、この場合には探している答えである：

は、送信ボタンの例にIDを追加します。

<input class="button-primary change" id="Kontakt_Submit" type="submit" value="Send"> 

は、その後、次のあなたのjsファイルで、これはあなたを助ける

if ($_POST['check'] == 'Kontakt_Form') { 
     $result_array = array(); 
     $extracted_Array= array();       // since we declared   both the variable names as "value" in JQuery 
     parse_str($_POST['Kontakt_Form_Data'], $extracted_Array); 
     $name= $extracted_Array['name']; 
     $email= $extracted_Array['email']; 
...//do the the other things what you need to do here, then enter in result array and return it for your output values if any. 
} 

・ホープ、このコードを追加する同様のコードあなたのajax.phpファイル内

jQuery("#Kontakt_Submit").click(function() { 
     //serialize the data, in simple terms for you to understand, it will 
     // get all the input element name value, then this data will be sent as POST DATA 
     var data = jQuery('form').serialize(); 
     console.log('data-->' + data); 
     $.ajax({ 
     type: 'POST', 
     dataType: "json", 
     url: 'ajax.php', 
     data: { 
      check: 'Kontakt_Form', 
      Kontakt_Form_Data: data 
     }, 
     success: function (data) { 
     } 
    }); 
}); 

次を書きますあなたが望むものをセットアップする簡単な方法で理解してください。