如何清除表格？答案

【问题标题】：How to clear a form?如何清除表格？
【发布时间】：2011-08-27 01:55:45
【问题描述】：

例如我有一个这样的表格：

<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>

当我按下Reset 时，它会清空所有字段。但是，如果我使用 URL 参数填充一些字段，然后按 Reset，它只会清空我在重新加载表单后输入的字段。

如果在加载表单时某些字段已经填充，我如何清空所有字段。

【问题讨论】：

问问自己是否真的需要一个重置按钮。它们通常被认为是无用的。 useit.com/alertbox/20000416.html stillnetstudios.com/no-more-reset-buttons-please
查看接受的答案here 以获取使用 jQuery 的解决方案
@Rob Stevenson-Leggett：我读了这篇文章，现在没有使用重置按钮是对的。填写注册表时可能无法使用。但是，当处理在表单下方显示表单更改事件记录的搜索表单时，我认为重置/清除按钮很有用。
当表单嵌入到模式/对话框中时，您希望每次打开模式/对话框时重新设置表单。

标签： html forms reset

【解决方案1】：

正如其他人指出的那样，我认为您应该重新考虑空白表单的必要性。但是，如果您真的需要该功能，这是一种方法：

纯 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;
}

请注意，我注释掉了清除 hidden 输入的情况。大多数情况下，这不是必需的。

为此，您需要从按钮的onclick 处理程序（或其他方式）调用该函数，例如像这样：

<input type='reset' value='Reset' name='reset' onclick="return resetForm(this.form);">

您可以在jsFiddle 上进行测试。

如果你在你的项目中使用 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;
    });

});

另外，请注意，我不会清除隐藏输入、复选框和单选按钮的值。

玩这个here。

【讨论】：

测试了它并没有清除文本区域。我们知道出了什么问题吗？
@Abhishek 它有效，请检查小提琴：jsfiddle.net/fmTDY 为什么它不适用于您的特定情况，我不知道。
这确实对我有用，除了我必须用“document.getElementById('myForm').getElementsById”替换“form.getElementsById”。不是世界上最漂亮的东西，我也不知道为什么。 . .但它工作得很好。
这不起作用。小提琴中的文本区域不清晰。我正在使用 Chrome 63.0.3239.132。

【解决方案2】：

在 jquery 中你可以简单地使用，

$("#yourFormId").trigger('reset');

【讨论】：

【解决方案3】：

您必须通过 javascript 将它们全部清除（或从服务器端清除）。

reset 按钮只会将表单元素重置为其初始值 - 如果这是一个特定值，它将被重置为该值。

【讨论】：

这意味着我必须一个一个地清除每个字段。是否有任何最短的方法可以使用一个 JS 函数/语句清除所有字段，我可以在每个表单中使用它？我有超过 50 个字段的表单。
@Student - 您可以获取所有输入元素并清除循环中的值。我建议花点时间学习jQuery。
循环遍历theForm.elements，检查它是否是字段集、选择、单选组、复选框或其他内容，然后采取相应措施。

【解决方案4】：

清除表单最简单的方法是使用 HTML 标记

<input type="reset" value="Reset">

例子：

<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>

【讨论】：

重置行为的唯一问题是，如果表单是预先填充的，它会将值重置回设置的初始值。因此，如果您在错误或类似情况下自动填写某些字段，那么不幸的是，这不会像您希望的那样运行。

【解决方案5】：

如果你使用 jQuery，代码会简单得多：

$('#my-form').not(':button, :submit, :reset, :hidden').val('').removeAttr('checked').removeAttr('selected');

如果您还想清除隐藏字段，也可以从 .not 选择器中删除 :hidden。

【讨论】：

【解决方案6】：

我总结了一些使用 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>

请注意，我已在 head 部分添加了 jquery 库的包含，并向“重置”按钮添加了 onclick 处理程序。最后，我根据此处其他一些答案的反馈添加了 javascript 代码。

我还在一个文本字段中添加了一个预设值。 val('') 函数不会清除此类字段，这就是为什么我还在最后一个脚本行中添加了attr('value','') 以清除此类默认值。

【讨论】：

【解决方案7】：

你可以在 JS 中做类似的事情，并在你的按钮中从onclick 调用它：

function submit() {
  $('#fieldIdOne').val('');
  $('#fieldIdTwo').val('');
}

然后在你的 HTML 文件中：

<button id="submit" onclick="submit(); return false">SIGN UP</button>

如果您碰巧将此解决方案与 Firebase 一起使用，它实际上不会向数据库发送任何内容，除非您在调用后立即添加 return false。

【讨论】：

【解决方案8】：

使用HTMLFormControlsCollection 的另一种方法：

for (let el of form.elements) el.value = null

【讨论】：

不，这不适用于 radio 和 checkbox 类型的输入。它甚至“破坏”了它们的价值，这些价值存储在value。

【解决方案9】：

用 JS 做的简单方法：

<form id="myForm">
   <!-- inputs -->
</form>

const { myForm } = document.forms;
myForm.reset();

【讨论】：

【解决方案10】：

我刚刚遇到了这个问题，并使用了<a> 来帮助通过重新加载页面来清除表单。将<a> 元素设置为按钮很容易。

例如

<a href="?" class="btn btn-default">Clear</a>

通过使用？对于 href 属性，<a> 将从服务器重新加载页面而不提交。

我更喜欢不依赖于 JavaScript 的解决方案，因此希望这对某些人有用。

【讨论】：

【解决方案11】：

使用 JavaScript 为表单指定一个 ID 'myform'：

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

【讨论】：

这不会解决问题。如果表单加载了预填充的值，reset 将简单地将表单重置为这些值。