javascript - 在提交表单的 div 中显示消息

Question

每当用户提交表单时，我都会尝试显示()一个div。整个网站只有一页。目前，当您提交时，表单已提交，然后 .confirmation div 显示约 1 秒，然后消失，页面刷新，div 消失。

这是我的 HTML

    <form id="contactform" class="col s12 l6" action="mailer.php" method="post" >

      <div class="confirmation"><p>Thanks for contacting us. We will be in touch with you shortly.</p></div>

      <div class="row">
        <div class="input-field col s12">
          <input name="inputName" type="text" class="validate">
          <label for="inputName">Name</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s6">
          <input name="inputEmail" type="email" class="validate">
          <label for="inputEmail">Email</label>
        </div>
        <div class="input-field col s6">
          <input name="inputPhone" type="text" class="validate">
          <label for="inputPhone">Phone</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <textarea class="materialize-textarea" name="inputMessage"></textarea>
          <label>Message</label>
        </div>
      </div>
      <div class="row">

          <button id="submit-button" class="btn waves-effect waves-light cyan col s6" type="submit">Submit
            <i class="mdi-content-send right"></i>
          </button>

      </div>
    </form>
    <script src="js/scripts.js"></script>

CSS

.confirmation {
  display: none;
}

这是我的 PHP

    <?php
    /* Set e-mail recipient */
    $myemail = "krm218@gmail.com";

    /* Check all form inputs using check_input function */
    $name = $_POST['inputName'];
    $email = $_POST['inputEmail'];
    $phone = $_POST['inputPhone'];
    /* $inquiry = $_POST['inputInquiry']; */
    $message = $_POST['inputMessage'];

    /* Let's prepare the message for the e-mail */

    $subject = "Cleaning Services Contact or Estimate";

    $message = "

    Victorias Cleaning Services Contact Form

    Name: $name
    Email: $email
    Phone: $phone

    Message:
    $message

    ";

    /* Send the message using mail() function */
    mail($myemail, $subject, $message);

    /* Redirect visitor to the thank you page */
    header('Location: index.html#contact');

    exit();
    ?>

和一个scripts.js 文件

$('#submit-button').click(function(){
    $(".confirmation").show();
});

提前致谢!!

Answer 1

在 script.js 中尝试一下:

$('#contactform button[type=submit]').click(function(e){
  e.preventDefault();
  $('.confirmation').show();
  setTimeout(function(){
    $('#contactform').submit();
  }, 5000);
});

5000 表示消息将显示 5000 毫秒(5 秒)，然后提交表单。

(所有其他文件可以保持原样)