javascript ajax how to prevent duplicated submissions

Question

Issue description:

I have a web application,once I fast click the "Add Parts" button multiple times in a very short time,there will be multiple duplicated records.

Here is the html:

<form id="addform">
  <div class="loading d-none">
    <button>
      <span role="status" aria-hidden="true"></span>
      Processing...
    </button>
  </div>
  <div class="loaded">
    <button>Add Parts</button>
  </div>
</form>

Here is the javascript code:

function sLoading(element) {
    $(element).find('div.loading').removeClass('d-none');
    $(element).find('div.loaded').addClass('d-none');
    $(element).find('div.error').addClass('d-none');
};

function sLoaded(element) {
    $(element).find('div.loading').addClass('d-none'); 
    $(element).find('div.loaded').removeClass('d-none');
    $(element).find('div.error').addClass('d-none');

};

Here is where the ajax has been applied:

function addFrom(event) {
    event.preventDefault();
    var changeNeeded = false;
    var form = $('#addform');
    if (changeNeeded) {
        sLoading(form);
        $.ajax({
            url: '/api/sheet/' + ID + '/parts',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(payload),
            dataType: 'json',
            success: function(event) {
                sLoaded(form);
                window.location.reload();
        });
    } 
};

$('#addFrom').submit(addFrom);

Answer 1

I also had a situation like this.

Solution is to disable the submit button after form submission. So it can prevent multiple form submission and you have to specify the type of button is submit

I made a scenario like this, you does not want any loading or loaded functions and i used set timeout instead of your api

function sLoading(element) {
    $(element).find('div.loading').removeClass('d-none');
    $(element).find('div.loaded').addClass('d-none');
    $(element).find('div.error').addClass('d-none');
};

function sLoaded(element) {
    $(element).find('div.loading').addClass('d-none'); 
    $(element).find('div.loaded').removeClass('d-none');
    $(element).find('div.error').addClass('d-none');

};
function addForm(event) {
    event.preventDefault();
    //var changeNeeded = false;
    var button = $(this).find("#submit");
    button.prop('disabled',true).text('processing...');
    
    //sLoading(form);
    setTimeout(()=>{
      button.prop('disabled',false).text('Add Parts')
    },1000)
   /* if (changeNeeded) {
        sLoading(form);
        $.ajax({
            url: '/api/sheet/' + ID + '/parts',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(payload),
            dataType: 'json',
            success: function(event) {
                //sLoaded(form);
                button.prop('disabled',false)
                window.location.reload();
        });
    } */
};

$('#addform').submit(addForm); 

.d-none{
 display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="addform">
  <!--<div class="loading d-none">
    <button>
      <span role="status" aria-hidden="true"></span>
      Processing...
    </button>
  </div> -->
  <div class="loaded">
    <button id='submit' type='submit'>Add Parts</button>
  </div>
</form>