Submit function sending old and new data - php

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>'+
'<img src="https://img.icons8.com/material-sharp/24/26e07f/edit--v1.png" />'+
'<img src="https://img.icons8.com/ios-filled/50/fa314a/full-trash--v2.png" width="25"/>'+
'</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);
},
});
});
Hello I'm using Laravel with Ajax and sending a form to add a record to the database but when submitting this form on the first time it works good but on the second, third, fourth … nth time it resends all of the old form submits.
,for example
submitting for the first time: works great it only sends the first time data
submitting for the second time: it sends the second time data and first time data
submitting for the third time: it sends the third, second and the first time data
so, on the second time instead of only adding one record to my data base I'm adding two records the new and old one and in the third time I'm adding three recode the new and old ones and goes on....
the html/bootstrap modal that contains the form:
<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">×</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

You are working with modals (Bootstrap). All good. The thing is, they are cached in the browser. You probably close the modal and open a new one. This could be the reason you are sending twice or more the same data.
Instead of
$("#create_modal").modal('hide');
use
$("#create_modal").modal('dispose');
to destroy it's instance as explained at https://getbootstrap.com/docs/4.6/components/modal/#modaldispose
A user's request to open a new modal will simply create a new instance of the modal. I hope this solves your issue. It's worth a try.