Bootstrap - Modal dialog avoid duplicate entry and empty on load

Question

I am having a web app using bootstrap 3, datatables, js and php.

I am facing two issues:

a) When i press SAVE button on modal, it sometimes taking more seconds to load the code. This has a result, that users press again SAVE button. The result is that the app is getting duclicate answer(row in the database).

b) When modal is load, user can see for 1 second data from previous open row.

I want to fix this two issues.

I am posting a part of the modal and js. As my modal has 15 input/select fields.

My html code(.php) of the page:

<div class="modal fade" id="update_appointment" tabindex="-4" role="dialog" aria-label="UpdateAppointmentModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-customer" 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>
                <h5 class="modal-title">View Appointment</h5>
            </div>
            <form method="POST" id="UpdateAppointmentForm" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="row" id="UpdateAppointmentFormdiv">
                        <div class="col-xs-12">
                            <div class="form-group row">
                                <label for="upd_app_date" class="col-xs-2 col-form-label">Date:</label>
                                <div class="col-xs-2 form-group">
                                    <input id="upd_app_date" name="app_date" type="text" class="form-control date"/>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="upd_work_id" class="col-xs-2 col-form-label">Work:</label>
                                <div class="col-xs-5 form-group">
                                    <select id="upd_work_id" name="work_id" class="form-control">
                                        <option value="">Please Select</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="upd_app_price" class="col-xs-2 col-form-label">Price:</label>
                                <div class="col-xs-2 form-group">
                                    <input id="upd_app_price" name="app_price" type="text" class="form-control price" value=""/>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="upd_app_paid_to" class="col-xs-2 col-form-label">Paid To:</label>
                                <div class="col-xs-3 form-group">
                                    <select id="upd_app_paid_to" name="app_paid_to" class="form-control">
                                        <option value="">Please Select</option>
                                        <option value="0">Bill</option>
                                        <option value="1">John</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" id="UpdateAppointmentFormloader" style="display:none;">
                        <div class="col-xs-12 text-center">
                            <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                            <span class="sr-only">Loading...</span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

My js code of the modal submit button:

$('#UpdateAppointmentForm').submit(function(event) {
    event.preventDefault(); //prevent default action 
    upd_app_date = $('#upd_app_date').val();
    if (isValidDate(upd_app_date) === false) {
        alert("Appointment date is not valid.");
        return false;
    }
    if ($('#upd_work_id').val() != "") {
        upd_work = $('#upd_work_id option:selected').html();
    } else {
        upd_work = "";
    }
    if ($('#upd_app_paid_to').val() != "") {
        upd_app_paid_to = $('#upd_app_paid_to option:selected').html();
    } else {
        upd_app_paid_to = "";
    }
    
    html  = '<td>' + $('#upd_app_date').val() + '</td>';
    html += '<td>' + upd_work + '</td>';
    html += '<td class="text-right">' + $('#upd_app_price').val() + '</td>';
    html += '<td class="text-center">' + upd_app_paid_to + '</td>'; 
    html += '<td class=" text-center">';
    html += '<button type="button" class="btn btn-primary btn-sm same_button_td" onclick="viewAppoitment(\'' + $('#upd_app_id').val() + '\')"><i class="fa fa-eye" aria-hidden="true"></i></button> <button type="button" class="btn btn-success btn-sm same_button_td" onclick="editAppoitment(\'' + $('#upd_app_id').val() + '\', $(this))"><i class="fa fa-pencil" aria-hidden="true"></i></button></td>';
    
    app_paid_to = $('#upd_app_paid_to').val();
    if (app_paid_to != "") {
        if (price_paid.length == 0) {
            alert("Price Paid cannot be blank.");
            return false;
        }
        if (payment_id == "") {
            alert("Select Payment");
            return false;
        }
        if (receipt_id == "") {
            alert("Select Receipt");
            return false;
        }
    }
    var form_data = $("#UpdateAppointmentForm").serialize(); //Encode form elements for submission
    $('#UpdateAppointmentFormdiv').hide();
    $('#UpdateAppointmentFormloader').show();
    $.ajax({
        url: "api/customer.php?action=UpdateAppointment",
        type: "POST",
        data: form_data,
        dataType: 'json',
        success: function(result) {
            if (result.success == true) {
                $ele.parent().parent().html(html);
                html = '<div class="alert alert-success alert-dismissible" role="alert">' + result.message + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>';
                $('#appalertmsg').html(html);
                $('#appalert').slideDown();
                $('#UpdateAppointmentForm')[0].reset();
                $('#UpdateAppointmentFormdiv').show();
                $('#UpdateAppointmentFormloader').hide();
                $('#update_appointment').modal('hide');
            } else {
                html = '<div class="alert alert-warning alert-dismissible" role="alert">' + result.message + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>';
                $('#appalertmsg').html(html);
                $('#appalert').slideDown();
                $('#UpdateAppointmentFormdiv').show();
                $('#UpdateAppointmentFormloader').hide();
            }
        }
    });
});

Solution for my A problem. If i put after event.preventDefault(); this lines:

    $('#UpdateAppointmentFormdiv').hide();
    $('#UpdateAppointmentFormloader').show();

will it fix my issue.

Solution for my B problem. I tried to use the following:

$('#update_appointment').on('hidden.bs.modal', function(){
    $('#upd_app_date').val('');
    $('#upd_work_id').val('');
    $('#upd_app_price').val('');
    $('#upd_app_paid_to').val('');
});

but with no success. Maybe i am having a small typo error in my code.