是否可以一键清除表单并重置（重新加载）页面？答案

【问题标题】：Is it possible to clear a form and reset (reload) the page with one button?是否可以一键清除表单并重置（重新加载）页面？
【发布时间】：2011-07-12 15:02:46
【问题描述】：

我在页面上有一个表单，用户在其中输入内容，然后返回结果并显示在页面上。我是否有可能拥有一个同时清除搜索结果和表单的按钮？

我知道您可以使用表单上的<input type="reset" value="Reset"/> 按钮重置表单，也可以使用以下代码重新加载页面。

<input type="button" value="Clear Results" onClick="window.location.reload()">

是否可以让按钮同时执行这两项操作，即清除搜索结果并重置表单？是否可以使用 JavaScript 来完成，如果可以怎么办？

谢谢

【问题讨论】：

<input type="reset" value="Reset" onClick="window.location.reload()"> 还是我错过了什么？
重新加载页面不会重置一切吗？
@Mimisbrunnr 不，它没有。自己试试——在本页顶部的搜索框中输入一些内容，然后点击刷新。你的价值还在。 Rockerest 的解决方案应该可以工作
但这就是应该发生的实际标准吗？还是您的浏览器“有帮助”
@katspaugh 是的jsfiddle.net/gZEUG。 @Mimisbrunnr 不确定，但确实会发生——所以需要处理。

标签： javascript html forms

【解决方案1】：

如果您想要您发布的两个 sn-ps 的功能，您可以简单地将它们组合起来。

<input type="reset" value="Reset" onClick="window.location.reload()">

【讨论】：

不要使用内联 JavaScript，维护起来很麻烦。

【解决方案2】：

我是@MikeyHogarth 建议的粉丝，因为无论页面如何刷新都会调用它。这是我发现直接 javascript 比 jquery 更简单的罕见情况之一，所以我只想为此添加代码。

$(document).ready(function () {
    resetForms();
});

function resetForms() {
    document.forms['myFormName'].reset();
}

这使用表单名称属性，如果您更喜欢使用表单 id 属性，请改用它：

document.getElementById('myFormId').reset();

【讨论】：

【解决方案3】：

使用 JQuery，在页面上做这样的事情；

$(document).ready(function () {
    resetForms();
});

function resetForms() {
    for (i = 0; i < document.forms.length; i++) {
        document.forms[i].reset();
    }
}

然后只需使用您的第二个输入，表单将在页面加载备份时自动刷新。

【讨论】：

【解决方案4】：

您可以使用以下代码简单地将页面重定向到当前位置：

$('[data-command="reset"]').click(function () {    
    window.location.href = window.location.href;
}

<input type="button" value="Clear Results" data-command="reset">

【讨论】：