提交功能发送旧数据和新数据

Question

$("#create-center-form").submit(function(e){

            e.preventDefault();
            let parent;
            let _token = $("input[name=_token]").val();
            let name=$("#name_create_medical_center").val();
            let email=$("#email_create_medical_center").val();
            let phone=$("#phone_number_create_medical_center").val();
            let country_id=$("#country_selector_create").val();
            let state_id=$("#state_selector_create").val();
            let city_id=$("#city_selector_create").val();
            let country_name=$("#country_selector_create option:selected").text();
            let state_name=$("#state_selector_create option:selected").text();
            let city_name=$("#city_selector_create option:selected").text();
            if($("#center_selector").is(":visible")){
                parent=$("#center_selector option:selected").val();
            }
            else
                parent="";

            console.log(name);
            console.log(email);
            console.log(phone);
            $("#first_button_create").prop('disabled', true);
            
            $.ajax({
                url:"{{route('add-medical-center')}}",
                type:"POST",
                data:{
                    _token:_token,
                    type:type,
                    name:name,
                    email:email,
                    phone:phone,
                    country_id:country_id,
                    state_id:state_id,
                    city_id:city_id,
                    country_name:country_name,
                    state_name:state_name,
                    city_name:city_name,
                    parent_id:parent,

                },
                success:function(response){
                    $("#tbody1").append(
                        '<tr>'+
                        '<td>'+response.id+'</td>'+
                        '<td>'+response.name+' </td>'+
                        '<td>'+response.address+' </td>'+
                        '<td>'+response.email+' </td>'+
                        '<td>'+response.phone+'</td>'+
                        '<td>'+
                             '<a href="" onclick="" data-toggle="modal" data-target="#update_modal"><img src="https://img.icons8.com/material-sharp/24/26e07f/edit--v1.png" /></a>'+
                             '<a href="delete_medical_center/'+response.id+'"><img src="https://img.icons8.com/ios-filled/50/fa314a/full-trash--v2.png" width="25"/></a>'+
                        '</td>'+
                        '</tr>'
                    );
                    alert("your response has been added!");
                    $("#create_modal").modal('hide');
                    $("#name_create_medical_center").val('');
                    $("#email_create_medical_center").val('');
                    $("#phone_number_create_medical_center").val('');
                    $('#country_selector_create').find('option').remove().end().append("<option value='select'> Select Country</option>");
                    $('#state_selector_create').find('option').remove().end().append("<option value='select'> Select State</option>");
                    $('#city_selector_create').find('option').remove().end().append("<option value='select'> Select City</option>");
                    $("#first_button_create").prop('disabled', false);
                },
                error:function(respomse){
                    alert("please check the input data and try again");
                    $("#first_button_create").prop('disabled', false);
                },
            });
        });

您好，我正在使用 Laravel 和 Ajax 并发送一个表单以将记录添加到数据库中，但是第一次提交此表单时效果很好，但在第二次、第三次时，第四次……它重新发送所有旧表单提交。 ,例如

第一次提交：效果很好，只发送第一次数据
第二次提交：发送第二次数据和第一次数据
第三次提交：发送第三次、第二次、第一次数据

所以，第二次我不是只向我的数据库添加一条记录，而是添加两条记录，新的和旧的，第三次我添加了三条记录，重新编码新的和旧的，然后继续在....

包含以下形式的 html/bootstrap 模式：

<div id="create_modal" class="modal fade" role="dialog" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h3 class="modal-title">Add New User</h3>
        </div>
        <div class="modal-body">
            <form id="create-center-form" class="ajax-form form-horizontal" enctype="multipart/form-data">
                @csrf
                <input type="hidden" id="hidden_create" value="">
                <!-- First Name -->
                <div class="form-group row">
                    <label for="name" class="col-md-4 col-form-label text-md-right">Name</label>
                    <div class="col-md-6">
                        <input id="name_create_medical_center" type="text" class="form-control" name="first_name" value="" required autocomplete="first_name" autofocus>
                    </div>
                </div>
                <!-- Main Center -->
                <div class="form-group row">
                    <label for="main_center" class="col-md-4 col-form-label text-md-right">Has a Main Center</label>
                    <div class="col-md-6">
                        <input type="checkbox" class="onoffswitch-checkbox" id="has_main_center" checked>
                    </div>
                    </div>
                    <!-- Select Main Center -->
                    <div class="form-group row" id="center_selector">
                        <label for="main_center" class="col-md-4 col-form-label text-md-right">Select Center:</label>
                        <div class="col-md-6">
                            <select class="form-select" aria-label="Default select example" id="medical_center_selector" >
                                <option selected>Select The Main Center</option>
                            </select>
                        </div>
                    </div>

                <!-- Email Address -->
                <div class="form-group row">
                    <label for="email" class="col-md-4 col-form-label text-md-right">Email</label>
                    <div class="col-md-6">
                        <input id="email_create_medical_center" type="email" class="form-control" name="Emial" value="" required autocomplete="email">
                    </div>
                </div>

                <!-- Phone Number -->
                <div class="form-group row">
                    <label for="phone_number" class="col-md-4 col-form-label text-md-right">Phone Number</label>
                    <div class="col-md-6">
                        <input id="phone_number_create_medical_center" type="text" class="form-control" name="phone_number" value="" required autocomplete="Password">
                    </div>
                </div>

                  <!-- Country, State and City -->
                  <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <select class="form-select" aria-label="Default select example" id="country_selector_create" >
                                <option selected>Select Country</option>

                              </select>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                            <select class="form-select" id="state_selector_create" onchange="">
                                <option selected>Select State</option>

                              </select>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                           
                            <select class="form-select" aria-label="Default select example" id="city_selector_create">
                                <option selected>Select City</option>

                              </select>
                        </div>
                    </div>
                </div>



                <div class="form-group row">
                    <input type="hidden" name="action" id="user-form-action" value="create" />
                    <input type="hidden" name="hidden_id" id="user-hidden-id" />
                    <button type="submit" name="create_update_user" id="user-form-action-button" value="create" class="btn btn-warning">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>

Answer 1

您正在使用模式 (Bootstrap)。都好。问题是，它们缓存在浏览器中。您可能会关闭模态并打开一个新模态。这可能是您发送两次或更多次相同数据的原因。

而不是

$("#create_modal").modal('hide');

使用

$("#create_modal").modal('dispose');

按照 https://getbootstrap.com/docs/4.6/components/modal/#modaldispose

中的说明销毁它的实例

用户打开新模式的请求将简单地创建一个新的模式实例。我希望这能解决您的问题。值得一试。

提交功能发送旧数据和新数据

Submit function sending old and new data

php

ajax

jquery

laravel

bootstrap-modal