模态内的表单在提交 ajax Laravel 后不会重置

Question

使用 tailwind 和 Laravel，我在模态内构建了一个表单，并尝试使用 ajax 提交。它已成功提交，但是当我第二次尝试提交数据时，它将同时提交第一个数据和第二个数据。

这是我的表格代码

这是我的ajax代码

 $('#appointmentForm').on('submit', function(e) {
                        $("#save").attr("disabled", true);

                        e.preventDefault();

                        var form = new FormData();


                        var patientId = $('#patient').val();
                        var doctor_id = $('#doctor_id').val();

                        if (patientId == 0 || doctor_id == 0) {

                            displayErrorMessage("Please select doctor and patient.");

                        } else {

                            var title = $('#title').val();
                            var status = $('#status').val();

                            var start1 = jQuery.fullCalendar.formatDate(start, "YYYY-MM-DD HH:mm:ss");
                            var end1 = jQuery.fullCalendar.formatDate(end, "YYYY-MM-DD HH:mm:ss");

                            var appointment_description = $('#appointment_description').val();



                            var source1 = $('#source').val();
                            if (source1 != '') {
                                var source = source1;
                            } else {
                                var source = 0;
                            }


                            var appointment_type = $('#appointment_type').val();
                            var new_patient_timeslot1 = $('#new_patient_timeslot1').val();
                            var followup_patient_timeslot1 = $('#followup_patient_timeslot1').val();
                            var procedure_timeslot1 = $('#procedure_timeslot1').val();
                            var location_id = $('#location_id').val();


                            var t1 = new Date(start1).getTime();

                            form.append('provider_id', eId);
                            form.append('patientId', patientId);
                            form.append('title', title);
                            form.append('status', status);
                            form.append('start', start1);
                            form.append('end', end1);
                            form.append('appointment_description', appointment_description);
                            form.append('source', source);
                            form.append('appointment_type', appointment_type);
                            form.append('doctor_id', doctor_id);


                            form.append('location_id', location_id);
                            form.append('type', 'add');


                            if (appointment_type == 1) {
                                form.append('timeslot', new_patient_timeslot1);

                                // if (mini >= 30 && mini <= 60) {
                                jQuery.ajax({
                                    url: "{{ url('/fullcalenderAjax') }}",
                                    headers: {
                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr(
                                            'content')
                                    },
                                    data: form,
                                    type: "POST",
                                    cache: false,
                                    processData: false,
                                    contentType: false,
                                    beforeSend: function() {
                                        $('.loader').css("display", "block");
                                    },
                                    complete: function() {
                                        $('.loader').css("display", "none");
                                    },
                                    success: function(data) {
                                        $('#save').removeAttr("disabled");
                                        jQuery("#appointmentForm").trigger("reset");

                                        if (data == 0) {
                                            displayErrorMessage(
                                                "Doctor is not available on that time.");

                                        } else {
                                            displayMessage(
                                                "Appointment Created Successfully");

                                            calendar.fullCalendar('renderEvent', {
                                                id: data.id,
                                                title: data.title,
                                                start: data.start,
                                                end: data.end,
                                                allDay: allDay,
                                                backgroundColor: '#1BA41D'
                                            }, false);
                                        }

                                        calendar.fullCalendar('unselect');
                                    }
                                });

                               

                            }

我尝试像这样重置数据

function resetModalData() {
            console.log('resetting...');

            // $('#patient').val("0");   
            // $('#patient').val(null).trigger('change');   

            $('#title').val('');
            // $('#appointment_description').val('');

            jQuery('#appointment_description').summernote('code', '');

            $('#source').val('');
            $('#appointment_type').val('');
            $('#new_patient_timeslot1').val('');
            $('#followup_patient_timeslot1').val('');
            $('#procedure_timeslot1').val('');

        }

我也试试

dom("#static-backdrop-modal-preview").find("form")[0].reset();

jQuery("#appointmentForm").trigger("reset");

但它不起作用。我希望在成功提交表单后重置。