所有输入值的 jQuery 表单重置按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12190986/
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
jQuery form reset button for all entered values
提问by NewUser
I am using a form and a reset button where I can reset all the entered values but it is not working at all.
我正在使用一个表单和一个重置按钮，我可以在其中重置所有输入的值，但它根本不起作用。
When I debugged with the Firefox console tab, I saw an error illegal characterat the end of the jQuery script. Can someone tell me what is the wrong part here?
当我使用 Firefox 控制台选项卡进行调试时，我illegal character在 jQuery 脚本的末尾看到了一个错误。有人能告诉我这里的错误部分是什么吗？
<!DOCTYPE HTML>
<html lang="en-IN">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery1.7.2.js"></script>
</head>
<body>
<script type="text/javascript">
jQuery('#reset').click(function(){
$(':input','#myform')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
});?
</script>
<form id='myform'>
<input type='text' value='test' />
<select>
<option>One</option>
<option selected="true">Two</option>
</select>
<select multiple="true" size="5">
<option>One</option>
<option selected="true">Two</option>
</select>
<input type='button' id='reset' value='reset' />
</form>?
</body>
</html>
回答by Robin Maben
回答by sQVe
Try the following:
请尝试以下操作：
$(function() {
$('#reset').click(function() {
$(':input','#myform')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
});
});
You're running the javascript before the DOM is ready. $(function() {})only runs when the DOM is ready. Read more here: .ready()
您正在 DOM 准备好之前运行 javascript。$(function() {})仅在 DOM 准备就绪时运行。在此处阅读更多信息：.ready()
回答by Ilia Rostovtsev
The other jQuery solution for resetting the form fields would be:
用于重置表单字段的另一个 jQuery 解决方案是：
$('#form')[0].reset();` or `$('#form').get(0).reset();
Another one, more specific, referring to the required fields:
另一个，更具体的，指的是必填字段：
$('#form').find('input, select').not(':button, :submit, :reset, :hidden').val('').removeAttr('checked').removeAttr('selected');
jsFiddle Working Live Demo- jQuery Solution
jsFiddle 工作现场演示- jQuery 解决方案
Using only JavaScript:
仅使用 JavaScript：
document.getElementById('form').reset();
Using only HTML:
仅使用 HTML：
As it was mentioned in one of the answers, in most cases you don't need JavaScript for resetting the form fields, it works just by settings type="reset"to the button, e.g.:
正如其中一个答案中提到的那样，在大多数情况下，您不需要 JavaScript 来重置表单字段，它只需通过设置type="reset"按钮即可工作，例如：
<button type="reset" value="Reset">Reset</button>
回答by Lewis G
The JQuery below will reset all text and dropdowns;
下面的 JQuery 将重置所有文本和下拉列表；
Just replace the #YourIDwith the ID of the field/input you're looking to reset, for multiple inputs, duplicate the lines and add ID's where appropriate
只需将#YourID替换为您要重置的字段/输入的 ID，对于多个输入，复制行并在适当的地方添加 ID
$(".btn-reset").click(function () {
$(this).closest('form').find("input[type=text], textarea").val("");
$('#YourID').removeAttr('selected').find('option:eq(0)').prop('selected', true);
});
