表单提交和函数运行后,内容立即消失

Question

我是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正确执行该功能,但结果(即将HEADING添加到html)发生了几毫秒才消失,并在我点击提交之前重置为原始页面.

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

Answer 1

将侦听器移动到窗体的提交处理程序.让函数返回false以停止提交:

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

从听众中取出按钮:

<input type="submit">

不要给它一个提交名称,因为这会掩盖表单的提交方法,所以你不能调用它.提交按钮只需要一个名称,如果表单上有两个或更多,并且您想知道哪个用于提交表单.

你的代码中有一个错误,它缺少一个收盘双qoute:

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

这可能会或可能不会解决您的问题,您没有说明您实际上想要做什么.