Question

当我打开编辑模态时，模态表单出现问题，模态弹出，它获取了我的数据，这是工作正常的但是模态并单击添加新用户，将自动获取数据，为什么在我关闭模态时仍要获取数据，应将其重置为空白？

在我关闭表单模式并且不执行任何操作之后，如何重置或清除表单模式？

这是我的Edit 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();
});

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

1 个答案: