Unwanted repeats of ajax/jquery POST request

Question

I'm running into an issue where my post requests are being repeated for reasons I cannot comprehend. I'm using a jQuery POST request to submit a form to a php script to insert it into an SQL database.

It only happens on some occasions and not consistently. 9/10 times it works as intended, but sometimes the ajax call is repeated 2 or 3 times.

enter image description here

repeating block of code:

function submitLog(){

let log = document.getElementById('logContent').value;
let project = document.getElementById('logger_active_project').innerHTML;
let category = document.getElementById('categorySelect').value;
let projectID = document.getElementById('logger_active_project_id').value;
let submit = document.getElementById('submit');
submit.disabled = true;

console.log('starting ajax post request');

$.post('./includes/logger/scripts/add_log.php', {
    log:log,
    project:project,
    category:category,
    project_id:projectID

}, function(data, status){
    document.getElementById('logContent').value= "";
    submit.disabled = false;
    console.log('ajax callback fired.' + data);
    
})

} EDIT:

It seems to only be happening when used with the following function:

function submitLogByEntering(){ let log = document.getElementById('logContent');

log.addEventListener("keyup", function(event) {
    // Number 13 is the "Enter" key on the keyboard
    if (event.keyCode === 13) {
      // Cancel the default action, if needed
      event.preventDefault();
      submitLog();
    }
  });
}

When using the button to duplicate the issue i can not get it to repeat.

Thanks a bunch in advance for any tips to get me in the right direction to fix this hot mess!

Answer 1

It will most likely be down to the listener for submitLog() .

Check that you're not using a listener that would multi fire.

If it's to much to check just set a test variable outside of your submitLog() , set it to true and test if true then fire the ajax. Then set it to false after your post request. This will stop duplicate button presses etc from happening or anything funny in the listener.

If you need to re fire the function set a timeout on the variable (Or set it after ajax completion) to reset it back to true.

EXAMPLE:

 var test = true; function submitLog() { if (test) { let log = document.getElementById('logContent').value; let project = document.getElementById('logger_active_project').innerHTML; let category = document.getElementById('categorySelect').value; let projectID = document.getElementById('logger_active_project_id').value; let submit = document.getElementById('submit'); submit.disabled = true; console.log('starting ajax post request'); $.post('./includes/logger/scripts/add_log.php', { log: log, project: project, category: category, project_id: projectID }, function (data, status) { document.getElementById('logContent').value = ""; submit.disabled = false; console.log('ajax callback fired.' + data); }); test = false; setTimeout(function () { test = true; }, 5000); } }