在提交表单的 div 中显示消息答案

【问题标题】：Show message in div in submit form在提交表单的 div 中显示消息
【发布时间】：2015-02-06 22:31:40
【问题描述】：

每当用户提交表单时，我都会尝试显示（）一个 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();
});

提前致谢！！

【问题讨论】：

当您点击提交时，表单会将表单数据发送到 mailer.php，然后向用户显示该请求的结果（重新加载页面）因此在页面之前运行的任何 javascript/jquery重新加载无关紧要。在 PHP 中尝试这样的事情：<div class="confirmation" style="<?php if(!isset($_POST)) echo 'display: none'; ?>"> 这样，你也不需要 css
我把它放在了 php 表单上，但是 .confirmation div 现在显示在浏览器中，因为我关闭了 css。是否可以在开始时隐藏并在页面重新加载并提交表单后显示？
这就是我的例子应该发生的事情......
我发的php要放到你发的html最上面，替换确认div的开始标签..
所以我这样做了，victoriacleans.com/vc.com/index.html 联系部分有点坏了....在我将它放入 html 之前，推荐 div 是 100%..？

标签： javascript php forms submit

【解决方案1】：

在 scripts.js 中试试这个：

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

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

（所有其他文件都可以保持原来的样子）

【讨论】：

您可能想检查哪个 div 具有“确认”类，我不确定网站上的 HTML 是否与现在示例中的相同..
好的，我已经修改并上传了
看起来它正在提交，但 div 仍然受到 css 显示的影响：无；所以它没有出现
再看一下我的代码，我稍微调整了一下，如果你用上面的代码更新 scripts.js，它应该可以工作！
做到了！非常感谢！！！所以为了让它更短 id 将其更改为 3000 左右。

【解决方案2】：

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

【讨论】：

我希望能够有某种消息告诉用户表单已发送.. 但它似乎太快了？我可以放慢速度吗？
当表单提交时，让它触发阻止表单默认操作的Javascript。然后，显示您的 div，等待并运行 document.forms[0].submit() 以真正提交表单。