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

不要为其命名 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
};

这可能会或可能不会解决您的问题，您还没有说出您实际想要做的事情。

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

1 个答案: