更改聯系表單的html AFTER驗證和發送的郵件

Question

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

 $(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(){ $('.form').html('').append(newHTML); }); }); 

 .contact-form { margin-top:30px; margin-bottom:70px; } .contact-form h1 { margin-bottom:70px; } .contact-form input { width:70%; margin:10px auto 20px auto; } .message textarea { max-width:80%; width:80%; margin:10px auto 20px auto; height:100px; } .contact-form .btn { background-color:#6f8595; color:white; transition:0.3s; width:50%; } .contact-form .btn:hover { background-color:white; color:#6f8595; 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"> <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 1

在隱藏表單之前，您應該檢查表單是否有效。 使用valid()嘗試這樣的事情：

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

Answer 2

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

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

contact.php

<?php
if (mail('caffeinated@example.com', 'My Subject', 'message')) {
    echo json_encode(['error' => false]);
} else {
    echo json_encode(['error' => true]);
}

然后在您的客戶端，您需要對contact.php執行ajax請求並根據請求的響應更新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>