javascript - Codeigniter 和 AJAX - 关闭编辑模式时重置/清除模式表单

Question

当我打开编辑模态时，我的模态表单出现问题，模态弹出并获取了我的数据，并且在我关闭时运行良好但是模式并单击添加新用户，数据会自动获取为什么在我关闭模式时获取它应该重置为空白？

在我关闭模态但未执行任何操作后，如何重置或清除我的表单模态？

这是我的编辑 Javascript/Ajax 代码

    $('#btnClose').click(function(){
            $('#myForm')[0].reset();
            }); //I Tried this block of code, but it didnt work 

        //Edit/Show
        $('#showdata').on('click','.item-edit', function(){
            var id = $(this).attr('data');
            $('#myModal').modal('show');
            $('#myModal').find('.modal-title').text('Edit Employee');
            $('#myForm').attr('action', '<?php echo base_url() ?>employees/updateEmployee');



            $.ajax({
                type: 'ajax',
                method: 'get',
                url: '<?php echo base_url() ?>employees/editEmployee',
                data: {id:id},
                async: false,
                dataType:'json',
                success: function(data){
                    $('input[name=txtEmployeeName]').val(data.employee_name);
                    $('textarea[name=txtAddress]').val(data.address);
                    $('input[name=txtId]').val(data.id);
                },
                error: function(){
                    aler('Could not edit Data');
                }
            });
        });

这是我的模态(我使用这个模态来创建和编辑我的数据，所以它只是一个模态)

    <!--MODAL-->

<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
            <form id="myForm" action="" method="post" class="form-horizontal">
                <input type="hidden" name="txtId" value="0">
                <div class="form-group">
                    <label for="name" class="label-control col-md-4">Employee Name</label>
                    <div class="col-md-8">
                        <input type="text" name="txtEmployeeName" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label for="address" class="label-control col-md-4">Address</label>
                    <div class="col-md-8">
                        <textarea class="form-control" name="txtAddress"></textarea>
                    </div>
                </div>
            </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" id="btnSave" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!--END MODAL-->

以防万一，您需要在此处查看我的添加/创建 javascript 代码

    $('#btnSave').click(function(){
            var url = $('#myForm').attr('action');
            var data = $('#myForm').serialize();

            //form validation
            var employeeName = $('input[name=txtEmployeeName]');
            var address = $('textarea[name=txtAddress]');
            var formValid = true;

            if (employeeName.val() == '') {
                employeeName.parent().parent().addClass('has-error');
            }else{
                employeeName.parent().parent().removeClass('has-error');
                formValid = false;
            }

            if (address.val()=='') {
                address.parent().parent().addClass('has-error');
            }else{
                address.parent().parent().removeClass('has-error');
                formValid = false;
            }

            if (!formValid) {
                $.ajax({
                    type: 'ajax',
                    method: 'post',
                    url: url,
                    data: data,
                    async: false,
                    dataType: 'json',
                    success: function(response){
                        if (response.success) {
                            $('#myModal').modal('hide');
                            $('#myForm')[0].reset();
                            if (response.type=='add') {
                                var type = 'added'
                            }else if(response.type=='update'){
                                var type = 'updated'
                            }
                            $('.alert-success').html('Employee '+type+' successfully').fadeIn().delay(3000).fadeOut('slow');
                            showAllEmployees();
                        }else{
                            alert('Error');
                        }
                    },
                    error: function(){
                        alert('Data is not added');
                    }
                });
            }

        });

Answer 1

替换

$('#btnClose').click(function(){
     $('#myForm')[0].reset();
 }); 

使用以下代码，

$("#myModal").on("hidden.bs.modal", function () {
    $('#myForm')[0].reset();
});