ページを再ロードせずにフォームを送信

Question

私は正常に動作するフォームを持っていますが、送信後にページをリロードします。ページを再読み込みするのではなく、フォームの下にメッセージを表示します。ここで

は私のhtmlコードです：

<form class=" form-horizontal" action="php/contact.php" method="post" id="contact_form" name="contact-form"> 
     <fieldset> 

     <div class="form-group"> 

       <input name="firstname" placeholder="First Name" class="form-control" type="text"> 
       <input name="lastname" placeholder="Last Name" id="lastname" class="form-control" type="text"> 
       <input name="email" placeholder="E-Mail Address" class="form-control" type="text"> 
       <input type="text" name="mail"> <!-- anti spam - needs to stay non-filled - hidden by css --> 
       <input name="phone" placeholder="(+44) 020 1234 5678" class="form-control" type="text"> 
       <input name="company" placeholder="Company name" class="form-control" type="text"> 
       <input name="website" placeholder="Website or domain name" class="form-control" type="text"> 
       <textarea class="form-control" name="message" placeholder="Your message"></textarea> 

      <!-- Success message --> 
      <div class="alert alert-success" role="alert" id="success_message"> 
       Thanks for contacting us, we will get back to you shortly.</div> 
      <button type="submit" class="btn btn-block btn-primary">Send <span class="fa fa-fw fa-lg fa-send"></span> </button> 

     </div> 
     </fieldset> 
    </form> 

私もjqueryの検証スクリプトを使用すると、これは、このスクリプトに簡単な要約（私は変更のほとんどがここで行われる必要があると考えている）である：

$(function() { 
     $("form[name='contact-form']").validate({ 

     rules: { 

      firstname: "required", 
      message: "required", 
      email: { 
      required: true, 

      email: true 
      }, 

     }, 

     messages: { 
      firstname: " Please enter your firstname", 
      email: " Please enter a valid email address", 
      message: " Please type your message"   
     }, 

     submitHandler: function(form) { 
      form.submit(); 
     } 
     }); 
    }); 

そして、これは、提出後にページをリロードするPHPコード、次のとおりです。

<?php 

     $adresdo = "info@tucado.com"; 
     $temat = "Message from tucado.com"; 
     $zawartosc = "First Name: ".$_POST['firstname']."\n" 
        ."Last Name: ".$_POST['lastname']."\n" 
        ."Company: ".$_POST['company']."\n" 
        ."Email: ".$_POST['email']."\n" 
        ."Telephone: ".$_POST['phone']."\n" 
        ."Website: ".$_POST['website']."\n"  
        ."Message: ".$_POST['message']."\n"; 

     if(!$_POST['firstname'] || !$_POST['email'] || !$_POST['message']){ 
     header("Location: ../contact.html"); 
     exit; 
     } 
     $email = $_POST['email']; 
     if(mail($adresdo, $temat, $zawartosc, 'From: Contact <'.$email.'>')){ 
     header("Location: ../msg-sent.html"); 
     } 
    ?> 

でしたあなたはしてくださいメッセージの送信時にこのコードを変更してメッセージ（id = "success_message"）を表示するのを手伝ってください。ご協力ありがとうございました。

Answer 1

ajax投稿を試してください。送信ハンドラの中にajaxコードを入れ、serialiseまたはformdataを使用してフォーム全体を取得します。

submitHandler: function(form) { 
    $.ajax({ 
     url: "name_of_file.php", 
     type: "POST",    
     data: new FormData($(form)), 
     cache: false,    

     success: function(data) { 

      $("#success_message").html(data); 
     } 
    }); 
    return false; 
}, 

これは、データを取得するためにphpファイルに出力を表示します。