如何通过 JavaScript 重置（清除）表单？答案

【问题标题】：How to reset (clear) form through JavaScript?如何通过 JavaScript 重置（清除）表单？
【发布时间】：2010-09-24 11:42:36
【问题描述】：

我试过$("#client.frm").reset();，但它不起作用。那么如何通过jQuery重置表单？

【问题讨论】：

stackoverflow.com/questions/680241/blank-out-a-form-with-jquery的可能重复
注意：清除和重置是两个不同的东西。重置 (.reset()) 会将值恢复为 HTML 中的原始值。为此，请参阅下面的 Nick Craver 的解决方案。 “清除”通常意味着将值设置回空白/未选中/未选中；请参阅 MahmoudS 解决方案。

标签： javascript jquery

【解决方案1】：

form.reset()是一种DOM元素方法（不是jQuery对象上的一种），所以你需要：

$("#client.frm")[0].reset();
//faster version:
$("#client")[0].reset();

或者没有 jQuery：

document.getElementById("client").reset();

注意：如果表单包含任何具有属性的字段，reset() 函数将不起作用：

name='reset'

【讨论】：

我的大脑刚刚扩展，谢谢：“jQuery 对象是一个或多个 DOM 元素的类似数组的包装器。要获取对实际 DOM 元素（而不是 jQuery 对象）的引用，您有两种选择。第一种（也是最快的）方法是使用数组表示法： $( "#foo" )[ 0 ]; // 等价于 document.getElementById( "foo" ) 第二种方法是使用 .get( ) function: $( "#foo" ).get( 0 ); // 和上面一样，只是更慢。" learn.jquery.com/using-jquery-core/faq/…
我收到下一个错误：TypeError: document.getElementById(...).reset is not a function[了解更多]。我对表单使用 FormValidate 插件。它的 resetForm 也不会重置表单 =( 有什么建议吗？
Eugen，在这里，就像印第安纳琼斯和最后的十字军东征一样，你必须大步向前。如果您调用 document.getElementById('myform').reset() 它实际上会清除表单，即使该方法似乎不存在。典型的 M$ 混淆。

【解决方案2】：

你可以这样做：

$("#client.frm").trigger('reset')

【讨论】：

Trigger 带我进入新世界

【解决方案3】：

纯JS方案如下：

function clearForm(myFormElement) {

  var elements = myFormElement.elements;

  myFormElement.reset();

  for(i=0; i<elements.length; i++) {

  field_type = elements[i].type.toLowerCase();

  switch(field_type) {

    case "text":
    case "password":
    case "textarea":
          case "hidden":

      elements[i].value = "";
      break;

    case "radio":
    case "checkbox":
        if (elements[i].checked) {
          elements[i].checked = false;
      }
      break;

    case "select-one":
    case "select-multi":
                elements[i].selectedIndex = -1;
      break;

    default:
      break;
  }
    }
}

【讨论】：

这里是 jQuery 插件解决方案，应该大致相当。 stackoverflow.com/a/24496012/1766230（我用了你的selectedIndex = -1技巧。）
此解决方案现在不起作用（2016 年）。当表单具有文本、密码和文本区域输入的默认值时，您应该使用 elements[i].defaultValue="" 而不是 elements[i].value=""。
var field_type = elements[i].type.toLowerCase();
@Andrew：这取决于你想要什么。如果您只想将表单重置为defaultValues，您可以在表单对象上调用reset()。这里的代码是清除表单，而不是重置它。
不错的功能。我只需要将类型“数字”添加到第一个案例中。

【解决方案4】：

注意，如果表单中的某些输入标签具有name='reset'属性，函数form.reset()将不起作用

【讨论】：

我这辈子都想不通为什么它不起作用。然后我用来重置的按钮将id="reset" 更改为id="rst"，一切正常。

【解决方案5】：

.reset() 方法没有清除默认值和复选框字段，还有很多问题。

为了完全重置检查下面的链接 -

http://www.javascript-coder.com/javascript-form/javascript-reset-form.htm

【讨论】：

【解决方案6】：

通过Javascript 和jQuery 重置（清除）表单：

示例 Javascript：

document.getElementById("client").reset();

示例 jQuery：

您可以尝试使用trigger() Reference Link

$('#client.frm').trigger("reset");

【讨论】：

【解决方案7】：

清除表格如下

document.forms[0].reset();

您可以简单地清除组内的表单元素。通过使用这个forms[0]。

【讨论】：

【解决方案8】：

使用JavaScript函数reset()：

document.forms["frm_id"].reset();

【讨论】：

【解决方案9】：

试试这个：

$('#resetBtn').on('click', function(e){
    e.preventDefault();
    $("#myform")[0].reset.click();
}

【讨论】：

【解决方案10】：

您可以使用以下内容：

$('[element]').trigger('reset')

【讨论】：

【解决方案11】：

试试这个代码。为您提供完整的解决方案。

    <!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(":reset").css("background-color", "red");
});
</script>
</head>
<body>

<form action="">
  Name: <input type="text" name="user"><br>
  Password: <input type="password" name="password"><br>
  <button type="button">Useless Button</button>
  <input type="button" value="Another useless button"><br>
  <input type="reset" value="Reset">
  <input type="submit" value="Submit"><br>
</form>

</body>
</html>

【讨论】：

【解决方案12】：

使用这个简单的技巧来重置表单

_("form_id").reset();

【讨论】：

【解决方案13】：

您可以使用 onclick 功能清除整个表单。这是它的代码。

 <button type="reset" value="reset" type="reset" class="btnreset" onclick="window.location.reload()">Reset</button>

window.location.reload() 函数将刷新您的页面并清除所有数据。

【讨论】：