Html 如何清除表格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6028576/
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
How to clear a form?
提问by Student
For example I have a form like this:
例如我有一个这样的表格：
<form method='post' action='someaction.php' name='myform'>
<input type='text' name='text1'>
<input type='text' name='text2'>
<input type='checkbox' name="check1">Check Me
<textarea rows="2" cols="20" name='textarea1'></textarea>
<select name='select1'>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type='reset' value='Reset' name='reset'>
<input type='submit' value='Submit' name='submit'>
</form>
When I press Resetit empties all fields. But if I populate some fields using URL params and then press Reset, it only empties fields which I enter after form reload.
当我按下Reset它时会清空所有字段。但是，如果我使用 URL 参数填充某些字段然后按Reset，它只会清空我在表单重新加载后输入的字段。
How can I empty all fields whether some fields are already populated at the time of form load.
如果某些字段在表单加载时已填充，我如何清空所有字段。
回答by Marko Dumic
As others pointed out, I think you should reconsider the need to blankthe form. But, if you really need that functionality, this is one way to do it:
正如其他人指出的那样，我认为您应该重新考虑将表格填空的必要性。但是，如果您真的需要该功能，这是一种方法：
Plain Javascript:
纯Javascript：
function resetForm(form) {
// clearing inputs
var inputs = form.getElementsByTagName('input');
for (var i = 0; i<inputs.length; i++) {
switch (inputs[i].type) {
// case 'hidden':
case 'text':
inputs[i].value = '';
break;
case 'radio':
case 'checkbox':
inputs[i].checked = false;
}
}
// clearing selects
var selects = form.getElementsByTagName('select');
for (var i = 0; i<selects.length; i++)
selects[i].selectedIndex = 0;
// clearing textarea
var text= form.getElementsByTagName('textarea');
for (var i = 0; i<text.length; i++)
text[i].innerHTML= '';
return false;
}
Note that I commented out the case in which I clear the hiddeninputs. Most of the time, this is not necessary.
请注意，我注释掉了清除hidden输入的情况。大多数情况下，这不是必需的。
For this to work, you need to call the function from the onclickhandler of a button (or some other way), e.g. like this:
为此，您需要从onclick按钮的处理程序（或其他方式）调用该函数，例如：
<input type='reset' value='Reset' name='reset' onclick="return resetForm(this.form);">
You can test it all here on jsFiddle.
你可以在jsFiddle上测试这一切。
If you use jQuery in your project, you can do this with much less code (and no need to change the HTML):
如果你在你的项目中使用 jQuery，你可以用更少的代码来做到这一点（并且不需要更改 HTML）：
jQuery(function($) { // onDomReady
// reset handler that clears the form
$('form[name="myform"] input:reset').click(function () {
$('form[name="myform"]')
.find(':radio, :checkbox').removeAttr('checked').end()
.find('textarea, :text, select').val('')
return false;
});
});
Also, note that I do not clear the valuesof hidden inputs, check-boxes and radio buttons.
另外请注意，我不清除值的隐藏输入，检查框和单选按钮。
Play with this here.
在这里玩这个。
回答by tutesFree
In jquery simply you can use,
在 jquery 中你可以简单地使用，
$("#yourFormId").trigger('reset');
回答by Oded
You will have to clear them all through javascript (or clear it out server side).
您必须通过 javascript 清除它们（或清除服务器端）。
The resetbutton will only reset form elements to their initial value - if this was a specific value, that's what it will be reset to.
该reset按钮只会将表单元素重置为它们的初始值 - 如果这是一个特定的值，那么它将被重置为。
回答by Francis Lewis
If you're using jQuery, the code is much simpler:
如果您使用 jQuery，则代码要简单得多：
$('#my-form').not(':button, :submit, :reset, :hidden').val('').removeAttr('checked').removeAttr('selected');
You can also remove the :hidden from the .not selector if you want to clear hidden fields as well.
如果您还想清除隐藏字段，您还可以从 .not 选择器中删除 :hidden 。
回答by ociugi
The easiest way to clear a form is by using the HTML tag
清除表单的最简单方法是使用 HTML 标记
<input type="reset" value="Reset">
Example:
例子：
<form>
<table>
<tr>
<td>Name</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>Reset</td>
<td><input type="reset" value="Reset"></td>
</tr>
</table>
</form>
回答by Thomas Tempelmann
I've summarized some of the suggestions using jQuery to give a more complete solution to the question:
我总结了一些使用 jQuery 的建议，以提供更完整的问题解决方案：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Demo Forms</title>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
</head>
<body>
<form method='post' action='someaction.php' name='myform'>
<input type='text' name='text1'>
<input type='text' name='text2' value='preset value'>
<input type='checkbox' name="check1">Check Me
<textarea rows="2" cols="20" name='textarea1'></textarea>
<select name='select1'>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type='button' value='Reset' name='reset' onclick="return clearForm(this.form);">
<input type='submit' value='Submit' name='submit'>
<script>
function clearForm(form) {
var $f = $(form);
var $f = $f.find(':input').not(':button, :submit, :reset, :hidden');
$f.val('').attr('value','').removeAttr('checked').removeAttr('selected');
}
</script>
</form>
</body>
</html>
Note that I've added the inclusion of the jquery lib in the head section and added an onclickhandler to the Reset button. Lastly, I've added the javascript code based on the feedback from some other answers here.
请注意，我在 head 部分添加了 jquery 库的内容，并向onclickReset 按钮添加了一个处理程序。最后，我根据这里其他一些答案的反馈添加了 javascript 代码。
I have also added a preset valueto one text field. The val('')function would not clear such a field, that's why I've also added attr('value','')to the last script line to clear such default valuesas well.
我还在一个文本字段中添加了一个预设值。该val('')函数不会清除这样的字段，这就是为什么我还添加attr('value','')到最后一个脚本行以清除此类默认值。
回答by mur7ay
You can do something similar to this in JS and call it from onclickwithin your button:
你可以在 JS 中做类似的事情，并从onclick你的按钮中调用它：
function submit() {
$('#fieldIdOne').val('');
$('#fieldIdTwo').val('');
}
And then in your HTML file:
然后在您的 HTML 文件中：
<button id="submit" onclick="submit(); return false">SIGN UP</button>
If you happen to use this solution with Firebase, it actually won't send anything to the database unless you add return falseright after the call.
如果您碰巧将此解决方案与 Firebase 结合使用，它实际上不会向数据库发送任何内容，除非您return false在调用后立即添加。
回答by dy_
Another way to do that with HTMLFormControlsCollection:
使用HTMLFormControlsCollection执行此操作的另一种方法：
for (let el of form.elements) el.value = null
回答by Aezur
A simple way to do it with JS:
用 JS 做的一个简单方法：
<form id="myForm">
<!-- inputs -->
</form>
const { myForm } = document.forms;
myForm.reset();
回答by John Askew
I just came across this question and have used an <a>to facilitate clearing a form by reloading the page. It is easy to style an <a>element to appear as a button.
我刚刚遇到了这个问题，并使用了<a>通过重新加载页面来帮助清除表单。将<a>元素设置为显示为按钮的样式很容易。
e.g.
例如
<a href="?" class="btn btn-default">Clear</a>
By using ? for the href attribute, the <a>will reload the page from the server without submitting it.
通过使用 ？对于 href 属性，<a>将在不提交的情况下从服务器重新加载页面。
I prefer solutions which do not depend on JavaScript so hopefully this is of some use to someone.
我更喜欢不依赖于 JavaScript 的解决方案，所以希望这对某人有用。
