Question

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

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

你能帮忙吗？

谢谢！

Answer 1

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

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

Ryan 提供的示例：

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

注意：这可能无法重置某些字段，例如type="hidden"。

更新

如IlyaDoroshin所述，使用jQuery的trigger()可以实现同样的目的：

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

更新

如果您需要执行重置表单默认状态，则应查看Resetting a multi-stage form with jQuery的答案。

Answer 2

要重置表单（但不清除表单），只需触发reset事件：

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

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

Answer 3

类似于$("#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文字。

Answer 4

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

    });

  };

更多信息here和here

Answer 5

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

Answer 6

您只需使用reset按钮类型。

<input type="text" />
<input type="reset" />

jsfiddle

修改：请注意，reset按钮会重置原始值的表单，因此，如果该字段在按下后的字段<input type="text" value="Name" />上设置了一些值reset该字段将重置用户插入的值，并在此示例中返回“name”一词。

参考：http://api.jquery.com/reset-selector/

Answer 7

我使用以下解决方案：

1）设置Jquery Validation Plugin

2）然后：

$('your form's selector').resetForm();

Answer 8

function reset_form() {
 $('#ID_OF_FORM').each (function(){  
    this.reset();
 }); 
}

Answer 9

触发器的想法很聪明，但是我想用jQuery的方式来做，所以这里有一个小函数可以让你继续链接。

$.fn.resetForm = function() {
    return this.each(function(){
        this.reset();
    });
}

然后就这样称呼它

$('#divwithformin form').resetForm();

或

$('form').resetForm();

当然你仍然可以在链中使用它

$('form.register').resetForm().find('input[type="submit"]').attr('disabled','disabled')

Answer 10

会不会有用？

JQuery Clear Form on close

Answer 11

HTML

<form id="contactform"></form>

的JavaScript

 var $contactform = $('#contactform')
    $($contactform).find("input[type=text] , textarea ").each(function(){
                $(this).val('');            
    });

清除所有字段的简单和简短的功能

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

11 个答案:

更新

更新

jsfiddle