表单数据输出正在消失

Question

我对这张表格有疑问。我希望它 return 它在单击提交时进入下面

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

标签下。

<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>

Answer 1

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

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

Answer 2

当您提交表单时，它会自动刷新页面，这就是它出现一瞬间然后消失的原因。如果您实际使用 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; 
        }
     });

Answer 3

您需要获取您在 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;
}

表单数据输出正在消失

Form Data output is disappearing

javascript

jquery

forms

post

form-submit