表单数据输出正在消失

Form Data output is disappearing

本文关键字：消失 输出 数据 表单      更新时间：2023-09-26

我对这个表单有一个问题。我想让它返回到<>但是，当单击submit时，这些值在消失之前会停留几分之一秒。我想知道怎样才能让文字保持在<>标签。

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

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

当您提交表单时，您将它提交到同一页面。
这样，页面将被重新加载。随后，您的表单显示为重置，您的结果也是如此。

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

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

，而不是这样做…

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