表单数据输出正在消失答案

【问题标题】：Form Data output is disappearing表单数据输出正在消失
【发布时间】：2015-07-08 15:39:33
【问题描述】：

我在使用此表单时遇到问题。我希望它在单击提交时返回它进入下面的

标记的值，但是，这些值会在消失之前停留几分之一秒。我想知道如何让文本保留在

标记下。

<form method="POST">
        <div><span class="padded20">Select Announcement Title:</span> <input type="text" id="title" value="default title"></div>
     <div><span class="padded20">Select Announcement Here:</span> <input type="file" id="file"></div>
      <div><span class="padded20">Select Announcement Date:</span> <input type="date" id="date" value="2000-01-01"></div>
      <div class="padded220"><input type="submit" value="Submit Announcement"> </div>
    </form>


    <script>
     $(function() {
     $("form").submit(function() {
        if ($("#title") != null && $("#file") != null && $("#date") != null) {
             $("#displayAnnouncement p").html($("#date").val() + ' ' + $("#title").val() + ' ' + $("#file").val()); 
        return; 
        }
     });
     });

    </script>
    <div id="displayAnnouncement"><p></p></div>

【问题讨论】：

将：$("form").submit(function() { 替换为：$("form").submit(function(e) { e.preventDefault();。提交按钮，通过默认刷新页面，因此您必须阻止它们的默认操作，您可以通过获取事件（上述函数中的e）并调用舒适原型 preventDefault() ;不会提交表单。

标签： javascript jquery forms post form-submit

【解决方案1】：

您需要获取您在 if 语句中使用的 ID 的值。此外，当没有选择文件时，输入类型文件值为“”。我将您的代码调整为使用按钮而不是提交类型，并在单击事件侦听器上运行该函数。

http://jsfiddle.net/2a0jjb8t/

if ($("#title").val() != null && $("#file").val() != "" && $("#date").val() != null) {
         $("#displayAnnouncement p").html($("#date").val() + ' ' + $("#title").val() + ' ' + $("#file").val()); 
    return;
}

【讨论】：

【解决方案2】：

当您提交表单时，您将其提交到同一页面。
这样，页面就会重新加载。随后，您的表单似乎已重置，您的结果也是如此。

您可以使用preventdefault 或不提交表单来避免这种情况。在后一种情况下，您不会使用表单的submit 事件，而是使用按钮的clickevent。

【讨论】：

【解决方案3】：

当您提交表单时，它会自动刷新页面，这就是为什么它会出现一瞬间然后消失的原因。如果您实际上是使用 php 来处理这些数据，则需要设置一个 php 变量以进入 p 标记内。如果您不使用 php，请摆脱您的 $("form").submit(function() {

改为这样做......

  $(function() {
        if ($("#title") != null && $("#file") != null && $("#date") != null) {
             $("#displayAnnouncement p").html($("#date").val() + ' ' + $("#title").val() + ' ' + $("#file").val()); 
        return; 
        }
     });

【讨论】：