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

在scripts.js中尝试：

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

5000意味着它将显示消息5000毫秒（5秒），然后提交表单。

（所有其他文件可以保持原样）

Answer 2

页面刷新时，即提交表单。如果您希望它被延迟，您可以使用preventDefault和window.setTimeout（），或者您可以通过AJAX发送表单并稍后重定向页面。祝你好运！

以提交形式在div中显示消息

2 个答案: