内容在提交表单和函数运行后立即消失 [英] Content disappears immediately after form submitted and function runs

问题描述

我刚开始使用Javascript和HTML。

我在HTML中有以下表单：

 < div id =form-select> 
< form id =date_formaction =METHOD =POST> 
< datalist id =dates> 
< option value =February 7> 2月7日< / option> 
< option value =February 14> 2月14日< / option> 
< option value =February 21> 2月21日< / option> 
< option value =February 28> 2月28日< / option> 
< / datalist> 
< input type =textclass =inputname =dataid =datevalue =list =datesplaceholder =pick a date>< br& 
< input type =submitname =submitonClick =myFunction（）/> 
< / form> 
< / div> 
  

这是一个名为script.js的文件中的javascript。 js文件在头文件中链接为'script type =text / javascriptsrc =script.js'：

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

当我填写表单并点击submit时，javascript会正确执行函数，即在HEADING添加到html）发生几个毫秒之前消失，并重置到原始页面，我已经提交之前。

如何做到这一点，插入HEADING是否永久？

谢谢！

解决方案

监听器到窗体的提交处理程序。有函数返回false以停止提交：

 < form id =date_formonsubmit =return myFunction ...> 
  

从按钮中取出监听器：

 < input type =submit> 
   
 
 
 
 不要 >因为这将掩盖表单的提交方法，所以你不能调用它。提交按钮只需要一个名称，如果表单上有两个或更多，并且您想知道用于提交表单的提交按钮。
 
 
 
您的代码，它缺少一个结束双qoute：
  function myFunction（）{
 var input = document.getElementById（日期）。 
 if（input ===February 7）{
 document.getElementById（'w1'）。innerHTML =< h2> HEADING< / h2>; 
} 
 return false; // to stop submission 
}; 
  
这可能或可能无法解决您的问题，您没有说出您实际想做什么。
 
I'm new to Javascript and HTML.

I have the following form in 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>
Here's the javascript in a file called script.js. The js file is linked in the header as '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>;
   }
 };
When I fill out the form and hit submit, the javascript correctly executes the function, but the result (i.e. adding HEADING to the html) happens for a couple of milliseconds before disappearing and resetting to the original page before I had hit submit.

How do I make it so that the insertion of HEADING remains permanent?

Thanks!
解决方案
Move the listener to the form's submit handler. Have the function return false to stop submission:
<form id="date_form" onsubmit="return myFunction();" ...>
Take the listener off the button:
<input type="submit">
Do not give it a name of submit as that will mask the form's submit method so you can't call it. Submit buttons only need a name if there are two or more on a form and you want to know which one was used to submit the form.

There is an error in your code, it's missing a closing double 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
};
This may or may not fix you issues, you haven't said what you are actually trying to do.

                        
这篇关于内容在提交表单和函数运行后立即消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！