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

123

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

javascript jquery

— 阿库兹马
source

可能重复的stackoverflow.com/questions/680241/blank-out-a-form-with-jquery

— svk 2010年

6

注意：清除和重置是两件事。重置（.reset()）会将值恢复为HTML中的原始值。为此，请参阅下面的Nick Craver的解决方案。“清除”通常意味着将值设置回空白/未选中/未选中；请参阅MahmoudS解决方案。

— 路加福音

258

form.reset() 是一个DOM元素方法（jQuery对象上没有一个），因此您需要：

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

还是没有jQuery：

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

— 尼克Craver
source

4

我的大脑刚刚张开，谢谢：“ jQuery对象是一个或多个DOM元素的类似数组的包装。要获得对实际DOM元素（而不是jQuery对象）的引用，您有两个选择。第一个（和最快的方法是使用数组表示法：$（“ #foo”）[0]; //等效于document.getElementById（“ foo”）第二种方法是使用.get（）函数：$（“ #foo “）.get（0）; //与上述相同，只是速度较慢。” learn.jquery.com/using-jquery-core/faq/...

— 安德鲁·

我收到下一个错误：TypeError：document.getElementById（...）。reset不是一个函数[了解更多]。我将FormValidate插件用于表单。它的resetForm也不会重置表单=（有什么建议吗？

— Eugen Konkov

尤金（Eugen），在这里，就像印第安纳琼斯（Indiana Jones）和《最后的十字军》（The Last Crusade）一样，您必须迈出信心的飞跃。如果调用document.getElementById（'myform'）。reset（），即使该方法似乎不存在，它实际上也会清除该表单。典型的M $模糊处理。

— Newclique

43

您可以简单地执行以下操作：

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

— 用户名
source

1

一个Trigger带给我新的世界

— gonatee

17

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

— 马哈茂德·萨利赫（Mahmoud Saleh）
source

1

这是应该大致等效的jQuery插件解决方案。stackoverflow.com/a/24496012/1766230（我用了你的selectedIndex = -1把戏。）

— 路加福音

5

此解决方案目前（2016年）不起作用。如果表单具有用于文本，密码和文本区域输入的默认值，则应使用elements [i] .defaultValue =“”而不是elements [i] .value =“”。

— Andrew F.

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

— MartynasJanuškauskas18年

@安德鲁：这取决于你想要什么。如果只想将表单重置为defaultValues，则可以仅调用reset()form对象。此处的代码是清除表单，而不是重置表单。

— 保护者

4

，reset（）方法不会清除默认值和复选框字段，还有更多问题。

为了完全重置，请检查以下链接-

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

— Alpesh
source

4

复位（清除）形式throught Javascript＆jQuery：

示例Javascript：

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

jQuery示例：

您可以尝试使用trigger() 参考链接

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

— 高朗
source

4

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

— 亚历克斯波夫罗夫
source

2

试试这个：

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

— Hazem_M
source

2

清除表格如下

document.forms[0].reset();

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

— 纳加茹（Nagaraju Vuppala）
source

1

使用JavaScript函数reset()：

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

— 费利克斯·巴古尔（Felix Bagur）
source

1

您可以使用以下内容：

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

— 公正学习
source

0

试试这个代码。答案的完整解决方案。

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

— 贾弗·威尔逊（Jaffer Wilson）
source

-1

您可以使用onclick函数清除整个表单。此处是代码。

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

window.location.reload（）函数将刷新您的页面，所有数据将清除。

— Arjun
source