用于清除表单所有字段的 jQuery/Javascript 函数

IT技术 javascript jquery
2021-02-26 23:32:30

我正在寻找一个 jQuery 函数,它将在提交表单后清除表单的所有字段。

我没有要显示的任何 HTML 代码,我需要一些通用的东西。

你能帮我吗?

谢谢!

6个回答

注意:此答案与重置表单字段有关,而不是清除字段 - 请参阅更新。

您可以使用 JavaScript 的本机reset()方法将整个表单重置为其默认状态。

Ryan提供的示例

$('#myForm')[0].reset();

注意:这可能不会重置某些字段,例如type="hidden"

更新

正如IlyaDoroshin所指出的,同样的事情可以使用 jQuery 来完成trigger()

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

更新

如果您需要做的不仅仅是将表单重置为其默认状态,您应该查看使用 jQuery 重置多阶段表单的答案

进一步来说: $('#myForm')[0].reset();
2021-04-22 23:32:30
我同意@ktamlyn 我相信 OP 在通过 ajax 提交后试图清除表单。提交后重置表单有什么意义?如果您更新答案以说明它不会清除并且可能还显示如何清除表单,那将非常有帮助。
2021-04-25 23:32:30
我的问题是,这个答案是半真半假,并且误导了一些真正寻求“清除”的人(我是)。截至目前,已有 48 票赞成,有证据表明没有时间和勤奋阅读其他答案的人可能会留下不完整的信息。你的回答没有错,它需要更新说明它不会清除,它会重置。:)
2021-04-27 23:32:30
重置不会清除表单,它只是将表单值设置为其默认值,可能是也可能不是“”。此页面上的大多数其他答案都更好。
2021-04-30 23:32:30
要考虑的另一件事是 reset() 不适用于输入隐藏字段
2021-05-09 23:32:30

要重置表单(但不清除表单)只需触发reset事件:

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

清除表单,请参阅其他答案。

这一款非常完美!这应该是正确答案!
2021-04-17 23:32:30
这不能与客户端验证结合使用。如果验证失败,重置不会清除无效字段,而是将它们重置为最后一个输入值。
2021-04-30 23:32:30
这在答案中应该更高!
2021-05-05 23:32:30
@IlyaDoroshin:我只是说在使用客户端验证时它不起作用。可能是对其他人有用的信息。该线程中使用 val('') 的其他解决方案即使与客户端验证也能工作。
2021-05-06 23:32:30
@Jürgen Bayer 没有人说验证,它只是将表单重置为初始值要清除无效数据,您需要编写自己的方法,例如: $('#form input:invalid').val('')
2021-05-09 23:32:30

类似于$("#formId").reset()不会清除默认设置为"". 发生这种情况的一种方式是先前的表单提交:一旦提交了表单,reset()就会将表单值“重置”为先前提交的值,而这些值可能不是"".

清除页面上所有表单的一种选择是调用如下函数,简单地执行它clearForms()

function clearForms()
{
    $(':input').not(':button, :submit, :reset, :hidden, :checkbox, :radio').val('');
    $(':checkbox, :radio').prop('checked', false);
}

如果你想重置一个特定的表单,那么修改函数如下,并调用它clearForm($("#formId"))

function clearForm($form)
{
    $form.find(':input').not(':button, :submit, :reset, :hidden, :checkbox, :radio').val('');
    $form.find(':checkbox, :radio').prop('checked', false);
}

当我最初来到这个页面时,我需要一个考虑到表单默认值被更改并且仍然能够清除所有输入项的解决方案。

请注意,这不会清除placeholder文本。

@DayronGallardo 还记得添加:checkbox, :radio.not(我建议进行这些编辑)。
2021-04-23 23:32:30
詹姆斯,你需要重读我的帖子。
2021-04-26 23:32:30
您可以使用该$('#myForm').trigger("reset");方法来刷新/重置复选框等......!
2021-04-28 23:32:30
@DayronGallardo 可能还想添加 $(container_element).find(':checkbox, :radio').prop('checked', false);
2021-05-04 23:32:30
你的代码对我来说是最好的解决方案。我只是将容器作为参数添加到函数和我们不会重置的元素的类。最终函数看起来像这样: function clearForm($form) { $form.find(':input').not(':button, :submit, :reset, :hidden, .not-reset').val('' ); }
2021-05-08 23:32:30

设置val为“”

function clear_form_elements(ele) {

        $(ele).find(':input').each(function() {
            switch(this.type) {
                case 'password':
                case 'select-multiple':
                case 'select-one':
                case 'text':
                case 'textarea':
                    $(this).val('');
                    break;
                case 'checkbox':
                case 'radio':
                    this.checked = false;
            }
        });

    }

<input onclick="clear_form_elements(this.form)" type="button" value="Clear All" />  
<input onclick="clear_form_elements('#example_1')" type="button" value="Clear Section 1" />
<input onclick="clear_form_elements('#example_2')" type="button" value="Clear Section 2" />
<input onclick="clear_form_elements('#example_3')" type="button" value="Clear Section 3" />

你也可以尝试这样的事情:

  function clearForm(form) {

    // iterate over all of the inputs for the form

    // element that was passed in

    $(':input', form).each(function() {

      var type = this.type;

      var tag = this.tagName.toLowerCase(); // normalize case

      // it's ok to reset the value attr of text inputs,

      // password inputs, and textareas

      if (type == 'text' || type == 'password' || tag == 'textarea')

        this.value = "";

      // checkboxes and radios need to have their checked state cleared

      // but should *not* have their 'value' changed

      else if (type == 'checkbox' || type == 'radio')

        this.checked = false;

      // select elements need to have their 'selectedIndex' property set to -1

      // (this works for both single and multiple select elements)

      else if (tag == 'select')

        this.selectedIndex = -1;

    });

  };

更多信息在这里这里

@Onimusha几乎完美无瑕。请记住将HTML5 输入类型添加到第一组案例中:case 'color': case 'date': case 'datetime': case 'datetime-local': case 'email': case 'month': case 'number': case 'range': case 'search': case 'tel': case 'time': case 'url': case 'week':
2021-04-23 23:32:30
方法1完美无瑕,正确回答了问题。感谢那
2021-04-24 23:32:30
在 each-function 的末尾添加 $(this).change() 以将空白值传播给侦听器。
2021-05-11 23:32:30
    <form id="form" method="post" action="action.php">
      <input type="text" class="removeLater" name="name" /> Username<br/>
      <input type="text" class="removeLater" name="pass" /> Password<br/>
      <input type="text" class="removeLater" name="pass2" /> Password again<br/>
    </form>
    <script>
$(function(){
    $("form").submit(function(e){
         //do anything you want
         //& remove values
         $(".removeLater").val('');
    }

});
</script>