Question

我们如何使用纯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();
            });
        });

Answer 1

JavaScript的：

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

Jquery：

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

确保您的表单ID有效。

Answer 2

FIDDLE

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

如何清空ajax加载的表单？

2 个答案: