使用模态双重插入数据

Question

I`m working on PHP + MYSQL + AJAX project. I used Bootstrap Modal when adding data. After first time I click add, it will insert two records however it only occurs in its first time click.

Is there any way to prevent saving two records.

I appreciate your help and suggestion. Thanks

This is my modal

<div id="userModal" class="modal fade">
<div class="modal-dialog">
    <form method="post" id="user_form" enctype="multipart/form-data" class="form-horizontal">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Add User</h4>
            </div>
            <div class="modal-body">

                <div class="form-group">
                    <label class="col-lg-3 control-label">Name</label>
                    <div class="col-lg-9">
                        <input type="text" class="form-control" name="sName" maxlength="150" id="sName" placeholder="Enter your Name" />  
                        <span id='remainingC'></span>                
                    </div>
                </div>


                <div class="form-group">
                    <label class="col-lg-3 control-label">Username</label>
                    <div class="col-lg-9">
                        <input type="text" class="form-control" name="sUsername" maxlength="20" id="sUsername" placeholder="Enter your Username"/>   
                        <span id='remainingCu'></span>                
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-lg-3 control-label">Birthday</label>
                    <div class="col-lg-9">
                        <input type="text" class="form-control" name="sBirthday" 
                        onchange ="getAge();" maxlength="20" id="sBirthday" placeholder="YYYY-mm-dd"/>                                       
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-lg-3 control-label">Age</label>
                    <div class="col-lg-9">
                        <input type="text" class="form-control" name="iAge" maxlength="3" id="iAge" placeholder="Autofill when you fill Birthday"/>                                          
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-lg-3 control-label">Email</label>
                    <div class="col-lg-9">
                        <input type="text" class="form-control" name="sEmail" id="sEmail" placeholder="Enter your Email - eg. [e-mail]"/>                                        
                    </div>
                </div>

My AJAX requests

$(document).ready(function(){
$('#add_button').click(function(){
    $('#user_form')[0].reset();
    $('.modal-title').text("Add User");
    $('#action').val("Add");
    $('#operation').val("Add");
    // $('#user_uploaded_image').html('');
});

var dataTable = $('#user_data').DataTable({
    "processing":true,
    "serverSide":true,
    "order":[],
    "ajax":{
        url:"fetch.php",
        type:"POST"
    },
    "columnDefs":[
        {
            "targets":[0, 3, 4],
            "orderable":false,
        },
    ],

});

$(document).on('submit', '#user_form', function(event){
    event.preventDefault();
    var sName = $('#sName').val();
    var sUsername = $('#sUsername').val();
    var sBirthday = $('#sBirthday').val();
    var iAge = $('#iAge').val();
    var sEmail = $('#sEmail').val();

    if(sName != '' && sUsername != '' && sBirthday != '' && iAge != '' && sEmail != '')
    {
        $.ajax({
            url:"insert.php",
            method:'POST',
            data:new FormData(this),
            contentType:false,
            processData:false,
            success:function(data)
            {
                alert(data);
                $('#user_form')[0].reset();
                $('#userModal').modal('hide');
                dataTable.ajax.reload();
            }
        });
    }
    else
    {
        alert("Both Fields are Required");
    }
});

This is my Function for adding (insert.php)

if($_POST["operation"] == "Add")
{
    $statement = $connection->prepare("
        INSERT INTO users (sName, sUsername, sBirthday, iAge, sEmail) 
        VALUES (:sName, :sUsername, :sBirthday, :iAge, :sEmail)
    ");
    $result = $statement->execute(
        array(
            ':sName'    =>  $_POST["sName"],
            ':sUsername'    =>  $_POST["sUsername"],
            ':sBirthday'    =>  $_POST["sBirthday"],
            ':iAge' =>  $_POST["iAge"],
            ':sEmail'   =>  $_POST["sEmail"]

        )
    );
    if(!empty($result))
    {
        echo 'Data Inserted';
    }
}

Duplicate data after 1st click of add button in modal: Duplicate