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

【问题标题】：How to refresh page each time you press submit button?每次按下提交按钮时如何刷新页面？
【发布时间】：2014-03-07 08:02:12
【问题描述】：

我是 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”。

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

谢谢！

【问题讨论】：

我不明白这怎么能添加第二个标题。它每次都替换w1的HTML，它不会添加到它。
是的，barmar 是对的。它总是会替换 w1 的 innerHTML
很抱歉给您带来了困惑。我将代码固定为它应该读取的内容： document.getElementById('w1').innerHTML = document.getElementById('w1').innerHTML + inner.h"
HEADING
";我这样做是因为代码会在某个时候遍历数组以找出要添加的 HEADING 数量；所以如果数组中有 2 个元素，它会添加 HEADING 两次。

标签： javascript html forms submit

【解决方案1】：

你可以使用

window.location.reload();

在您的提交事件代码中..

【讨论】：

这段代码有助于刷新页面。但是，我猜Goelv不需要刷新这个页面来实现功能。
他清楚地提到了“我怎样才能让每次按下提交时页面都“刷新”？”.....而句子（以便页面“刷新”）清楚地说需要重新刷新页面..
只有一个问题，如果页面被刷新，他将如何保持价值？
为什么他需要保存值...表单将用于发送信息，发送信息后他想刷新页面，如果放置在正确的位置，上面的代码也会这样做
当我填写表格并点击提交时，javascript正确执行该函数并添加“HEADING”。所以这意味着他想在标题上显示值.. 无论如何，我猜@goelv 是对需求发表评论的合适人选

【解决方案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;
});

【讨论】：

我试过这个方法，但它无法填充“HEADING”

【解决方案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;
};

【讨论】：

【解决方案4】：

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

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

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

【讨论】：