Question

我是Javascript和HTML的新手。

我在 HTML ：

中有以下表格

<div id="form-select">
    <form id="date_form" onsubmit="return myFunction();">
        <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">
    </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 =  document.getElementById('w1').innerHTML + "<h2> HEADING </h2>";
   }
   return false;
 };

当我填写表单并点击提交时，javascript正确执行该功能并添加“HEADING”。但是，当我再次按下提交时，它会在第一次实例下第二次添加“HEADING”。

如何使每次按下提交时页面“刷新”？

谢谢！

Answer 1

您可以使用

window.location.reload();

在提交活动代码中..

Answer 2

使用jQuery，bind('submit', function(e){ e.preventDefault; ....; })

$('#date_form').submit(function(e){
    e.preventDefault();
    var input = document.getElementById("date").value;
    if(input==="February 7"){
        document.getElementById('w1').innerHTML = "<h2> HEADING </h2>";
    }
    return false;
});

Answer 3

您应该只更改HTML代码，如下所示：（您不应该使用form元素）

HTML：

<div id="form-select">
    <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>
    <button onclick="javascript:myFunction()">Submit</button>
</div>

JavaScript的：

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

Answer 4

找到解决问题的另一种方法。我添加了声明：

 document.getElementById('week').innerHTML = "";

在函数的每次调用开始时。这样，每次用户点击提交时，div都会在重新填充之前清空。

每次按提交按钮时如何刷新页面？

4 个答案: