如何清空ajax加载的表单？答案

【问题标题】：How to empty ajax loaded form?如何清空ajax加载的表单？
【发布时间】：2014-03-12 20:11:51
【问题描述】：

我们如何使用纯 JavaScript 或 jQuery 清空 ajax 加载的表单。我试过document.forms[0].reset(); 和$('#new-staff-form')[0].reset(); 都没有工作它返回undefined。

更新

<div class="box col-md-12 new-staff">
  <form id="new-staff-form" method="post">
                <div class="row">
                    <div class="col-md-6">
                        <label for="f_name">First Name</label>
                        <input  type="text" name="f_name" placeholder="First name"/>
                    </div>
                    <div class="col-md-6">
                        <label for="l_name">Last Name</label>
                        <input  type="text" name="l_name" placeholder="Last name"/>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <label for="user_name">User name</label>
                        <input id="user_name" type="text" name="user_name" placeholder="User name"/>
                    </div>
                    <div class="col-md-6">
                        <button id="user-avail" class="btn btn-primary">Check available</button>
                    </div>
                </div>                    
                <div class="row">
                    <div class="col-md-12">
                        <button class="btn btn-primary pull-left">Save</button>
                    </div>
                </div>
            </form>
</div>

Javascript：

$('#new-item').click(function(){ // works fine until I load new html form using ajax with same ids and class
            $('#new-staff-form')[0].reset();
            $('.new-staff').slideToggle(); // show new form
        });



$('.edit-item').click(function(){ // ajax call this loads everything correctly
            var id = $(this).data('staf_id'); //item to delete
            $.ajax({
                url:url_view_staff+id,
                type:'get'
            }).done(function(data){
                edit_item_id = id;
                $('.new-staff').html(data).slideDown();
            }).fail(function(data){
                $('#errors').html(data.responseText);
                $('.valid-error').slideDown();
            });
        });

【问题讨论】：

如果您使用相关选择器并在 DOM 中可用 FORM 时调用 reset，它应该可以工作。在没有看到任何相关代码的情况下很难弄清楚出了什么问题。顺便说一句，不确定“ajax 加载表单”是什么意思？！现在有一件事，FORM 中的任何元素都不能具有等于reset 的属性名称，这可能是您的问题
#new-center-form[0] 的结果是实际表单，还是只是表单的容器或子表单？因为只有实际的表单提供了 reset() 接口。
@A.Wolff 更新了我的 Qtn 请检查
#new-item 是否由 ajax 请求加载/刷新？确实，点击处理程序是在 ajax 请求之后触发的吗？
@Chris 重置意味着，小表单元素的值将被更改为默认值而不是空值。所以如果你想清空你的表单，你想为它编写另一个代码。

标签： javascript jquery ajax forms reset

【解决方案1】：

JavaScript：

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

jQuery :

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

确保您的表单 ID 有效。

【讨论】：

document.getElementById("myForm").reset(); 给出错误 TypeError: document.getElementById(...) is null 我在问题中提到的 jquery。两者都可以正常工作，直到没有通过 ajax 加载表单
能否在问题中添加表单标签
@A J 我添加了表单标签。我无法添加更多标签，只允许五个标签

【解决方案2】：

FIDDLE

$('#configreset').click(function(){
    $('#configform')[0].reset();
});

【讨论】：

您应该将问题标记为重复，而不是复制其他人的答案。
我不知道如何将问题标记为重复 :)
@putvande 这不是重复的问题。我的问题是 ajax 加载的表单。此代码仅适用于普通形式。 SO中的大部分问题都是针对正常形式的