jQuery / Javascript函数清除表单的所有字段[重复]

2020/10/28 07:22 · javascript ·  · 0评论

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

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

你能帮我吗?

谢谢!

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

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

Ryan提供的示例

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

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

更新

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

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

更新

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

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

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

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

类似于的内容$("#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文本。

设置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;

    });

  };

在这里这里更多信息

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

You can simply use the reset button type.

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

jsfiddle

Edit: Remember that, the reset button, reset the form for the original values, so, if the field has some value set on the field <input type="text" value="Name" /> after press reset the field will reset the value inserted by user and come back with the word "name" in this example.

Reference: http://api.jquery.com/reset-selector/

I use following solution:

1) Setup Jquery Validation Plugin

2) Then:

$('your form's selector').resetForm();
function reset_form() {
 $('#ID_OF_FORM').each (function(){  
    this.reset();
 }); 
}

the trigger idea was smart, however I wanted to do it the jQuery way, so here is a small function which will allow you to keep chaining.

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

Then just call it something like this

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

or

$('form').resetForm();

and of course you can still use it in the chain

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

Would something like work?

JQuery Clear Form on close

HTML

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

JavaScript

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

简单快捷的功能清除所有字段

本文地址:http://javascript.askforanswer.com/jquery-javascripthanshuqingchubiaodandesuoyouziduanzhongfu.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!