Codeigniter & AJAX - сбросить / очистить модальную форму при закрытии модального редактирования

Question

У меня проблема с моей модальной формой, когда я открываю модальное редактирование, модальное всплывающее окно извлекает мои данные, и это РАБОЧАЯ ХОРОШАЯ , но , когда я закрываю модальнуюи нажмите кнопку Добавить нового пользователя, данные автоматически выбираются. Почему они выбираются, когда я закрываю модальное окно, оно должно быть сброшено до blank ?

как мне сбросить или очистить модальную форму после того, как я закрыл модальное и ничего не делал?

здесь мой код 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-->

IN CASE вам нужно увидеть мои добавить / создать код 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();
});