更改聯繫表格的html驗證和郵件發送後

Question

我正在爲我的頁面使用一個基於php的聯繫表單，在提交按鈕被點擊並且（！）郵件已發送後，我將喜歡替換HTML的內容。我可以管理到目前爲止，單擊.btn後，HTML將被替換，但是在執行任何驗證併發送郵件之前會發生這種情況。你能告訴我一個方法嗎？非常感謝！

$(document).ready(function() { 
 
\t 
 
\t var newHTML = '<div class="col-sm-12 text-center" style="color:white; background-color:#6f8595; padding-bottom:15px; border-radius:5px;"><h3>Thank you for your message!<br />We will get back to you as soon as possible!</h3></div>'; 
 
\t 
 
    $('.btn').click(function(){ 
 
    \t $('.form').html('').append(newHTML); 
 
    }); 
 
});

.contact-form { 
 
\t margin-top:30px; 
 
\t margin-bottom:70px; 
 
} 
 

 
.contact-form h1 { 
 
\t margin-bottom:70px; 
 
} 
 

 
.contact-form input { 
 
\t width:70%; 
 
\t margin:10px auto 20px auto; 
 
} 
 

 
.message textarea { 
 
\t max-width:80%; 
 
\t width:80%; 
 
\t margin:10px auto 20px auto; 
 
\t height:100px; 
 
} 
 

 
.contact-form .btn { 
 
\t background-color:#6f8595; 
 
\t color:white; 
 
\t transition:0.3s; 
 
\t width:50%; 
 
} 
 

 
.contact-form .btn:hover { 
 
\t background-color:white; 
 
\t color:#6f8595; 
 
\t transition:0.3s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 

 
    <form class="form clearfix" action="index.php" method="post"> 
 
\t <div class="col-sm-6"> 
 
\t \t <p>Name:</p> 
 
\t \t <input type="text" name="name" placeholder="Your full name here" required> 
 
\t \t <p>Email:</p> 
 
\t \t <input type="email" name="email" placeholder="Your email here" required> 
 
\t </div> 
 
\t <div class="col-sm-6"> 
 
\t \t <p>Message:</p> 
 
\t \t <div class="message"><textarea name="message">Hello YourSite, </textarea></div> 
 
\t \t <div><input class="btn" type="submit" name="btn-submit" value="Send message!" required/></div> 
 
\t </div> 
 
</form>

Answer 1

您將需要使用Ajax來執行此操作。

首先，我們需要一個contact.php誰將完成這項工作，並返回一個響應，通知客戶電子郵件是否已發送。 例如：

contact.php

​​

然後在你的客戶，你需要做一個Ajax請求contact.php並根據請求的響應更新DOM：

client.html

<script> 
$(document).ready(function() { 

    var newHTML = '<div class="col-sm-12 text-center" style="color:white; background-color:#6f8595; padding-bottom:15px; border-radius:5px;"><h3>Thank you for your message!<br />We will get back to you as soon as possible!</h3></div>'; 

    $('.btn').click(function(){ 
     $.post('contact.php', $('.form').serialize(), function() { 
      if (data.error == false) { 
       $('.form').html('').append(newHTML); 
      } 
     }) 
    }); 
}); 
</script> 


    <form class="form clearfix"> 
    <div class="col-sm-6"> 
     <p>Name:</p> 
     <input type="text" name="name" placeholder="Your full name here" required> 
     <p>Email:</p> 
     <input type="email" name="email" placeholder="Your email here" required> 
    </div> 
    <div class="col-sm-6"> 
     <p>Message:</p> 
     <div class="message"><textarea name="message">Hello YourSite, </textarea></div> 
     <div><input class="btn" type="submit" name="btn-submit" value="Send message!" required/></div> 
    </div> 
    </form> 

Answer 2

你應該檢查你的表格是隱藏表單之前有效。嘗試使用valid()：

$('.btn').click(function(){ 
    if($('.form').valid()) 
     $('.form').html('').append(newHTML); 
});