提交表单并运行功能后内容立即消失答案

【问题标题】：Content disappears immediately after form submitted and function runs提交表单并运行功能后内容立即消失
【发布时间】：2014-03-04 05:36:54
【问题描述】：

我是 Javascript 和 HTML 新手。

我的 HTML 格式如下：

<div id="form-select">
    <form id="date_form" action="" METHOD="POST">
        <datalist id="dates">
            <option value="February 7">February 7</option>
            <option value="February 14">February 14</option>
            <option value="February 21">February 21</option>
            <option value="February 28">February 28</option>
        </datalist>
        <input type="text" class="input" name="data" id="date" value="" list="dates" placeholder="pick a date"><br>
        <input type="submit" name="submit" onClick="myFunction()"/>
    </form>
 </div>

这是一个名为 script.js 的文件中的 javascript。 js 文件在标题中链接为 'script type="text/javascript" src="script.js':

function myFunction(){
   var input = document.getElementById("date").value;
   if(input==="February 7"){
      document.getElementById('w1').innerHTML = "<h2> HEADING </h2>;
   }
 };

当我填写表单并点击提交时，javascript 正确执行了函数，但结果（即向 html 添加 HEADING）发生了几毫秒，然后在我点击提交之前消失并重置到原始页面.

如何使 HEADING 的插入保持永久性？

【问题讨论】：

表单正在提交，所以你的代码运行然后页面刷新。顺便说一句，由于没有一个表单控件具有 name 属性，因此没有提交任何值。
编辑：我将名称属性添加到两个表单元素（输入标签，对吗？）。虽然发生了同样的问题

标签： javascript html css forms submit

【解决方案1】：

将侦听器移至表单的提交处理程序。让函数返回 false 以停止提交：

<form id="date_form" onsubmit="return myFunction();" ...>

让听者离开按钮：

<input type="submit">

不要将其命名为 submit，因为这会掩盖表单的提交方法，因此您无法调用它。如果表单上有两个或多个按钮，并且您想知道哪个用于提交表单，则提交按钮只需要一个名称。

您的代码中有一个错误，它缺少一个结束双引号：

function myFunction(){
   var input = document.getElementById("date").value;
   if(input==="February 7"){
      document.getElementById('w1').innerHTML = "<h2> HEADING </h2>";
   }
   return false; // to stop submission
};

这可能会或可能不会解决你的问题，你还没有说出你真正想要做什么。

【讨论】：

啊，解决了！感谢您的帮助。