Javascript 是否可以一键清除表单并重置(重新加载)页面?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6666363/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 22:43:13  来源:igfitidea点击:

Is it possible to clear a form and reset (reload) the page with one button?

javascripthtmlforms

提问by zik

I've got a form on a page where the user types something in and then a result is returned and displayed on the page. Is it possible for me to have a button that will both, clear the search results and the form simultaneously?

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

I know that you can use the <input type="reset" value="Reset"/>button on the form to reset the form and also use the following code, to reload the page.

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

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

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

Is it possible to have the button do both things i.e. clear the search results and reset the form? Can it be done using JavaScript, if so how?

是否可以让按钮同时做两件事,即清除搜索结果和重置表单?可以使用 JavaScript 来完成吗,如果可以,怎么做?

Thanks

谢谢

回答by rockerest

If you want the functionality of both of the snippets you posted, you can simply combine them.

如果您想要您发布的两个片段的功能,您可以简单地将它们组合起来。

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

(There, now you can accept my answer XD)

(好了,现在你可以接受我的回答了XD)

回答by Chaya Cooper

I'm a fan of @MikeyHogarth's suggestion since it's called regardless of how the page is refreshed. This is one of those rare times that I find straight javascript to be simpler than jquery so I just wanted to add the code for that.

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

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

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

This uses the form name attribute, and if you'd prefer using the form id attribute use this instead:

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

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

回答by Mikey Hogarth

using JQuery, do something like this on the page;

使用 JQuery,在页面上做这样的事情;

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

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

and then just use your second input, forms will auto refresh when the page loads back up.

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

回答by Saeed Rahimi

you can simply redirect page to current location with this code:

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

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


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