У меня есть функция, которая слушает click и формирует submit с той же кнопки и отправляет запрос PUT, как показано ниже:
Кнопка:
<input type="submit" id="amendProj" placeholder="45" class="btn btn-dark" value="Save Changes">
Функция:
// PUT amend project function
$(document).on('click', '#amendProj', function () {
// fetch clicked button placeholder value
var fired_button = $(this).attr('placeholder');
// await default validation before form submission
$(document).on("submit", "#collapse" + fired_button, function (e) {
e.preventDefault();
// show loading spinner
document.getElementById("spinner").hidden = false;
//collect form data
var params = {
projectId: fired_button,
projectManager: $("#selectionMan" + fired_button + " option:selected").text(),
projectOwner: $("#selectionOwn" + fired_button + " option:selected").text(),
predictedLaunch: document.querySelector('#preDate' + fired_button).value,
actualLaunch: document.querySelector('#actDate' + fired_button).value,
predictedCompletion: document.querySelector('#precomDate' + fired_button).value,
actualCompletion: document.querySelector('#actcomDate' + fired_button).value,
predictedCost: document.querySelector('#preCost' + fired_button).value,
actualCost: document.querySelector('#actCost' + fired_button).value,
price: document.querySelector('#charge' + fired_button).value,
projectTitle: document.querySelector('#projTitle' + fired_button).value,
projectDescription: document.querySelector('#projDescribe' + fired_button).value,
requestor: document.querySelector('#projRequestor' + fired_button).value,
requestorEmail: document.querySelector('#requestorEmail' + fired_button).value,
requestorTel: document.querySelector('#requestorTel' + fired_button).value,
status: $("#projStatus" + fired_button + " option:selected").text()
}
// Create XHR Object and send
var xhr = new XMLHttpRequest();
xhr.open('PUT', 'http://link/resource/api/Projects/' + fired_button, true)
xhr.setRequestHeader("Content-type", "application/json");
xhr.send(JSON.stringify(params));
// Handle errors
xhr.onload = function () {
if (this.status == 204) {
// hide loading spinner
document.getElementById("spinner").hidden = true;
alert("Changes saved successfully!");
console.log(this.status + ' Changes submitted successfully!');
}
else {
// hide loading spinner
document.getElementById("spinner").hidden = true;
alert("Your submission failed. Please try again");
}
}
});
});
Теперь у меня есть проверка HTML по умолчанию с required. Когда я оставляю поле пустым и нажимаю кнопку, браузер отвечает сообщением проверки по умолчанию. Я исправляю свой ввод, нажимаю кнопку еще раз, и моя функция выполняется дважды или даже больше, в зависимости от того, сколько раз мне не удалось пройти проверку. Таким образом, это приводит к тому, что окно предупреждения отображается дважды или более раз после успешного выполнения в соответствии с моим кодом. Как мне изменить код, чтобы такое поведение не происходило? Я новичок в jquery и js, так что, может быть, чего-то не хватает.
Такое чувство, что когда я проваливаю проверку один раз, функция все еще работает и ожидает выполнения. И когда я снова нажимаю кнопку «Отправить» после исправления своих ошибок, она, очевидно, снова вызывает функцию и выполняет ее в сочетании с той, которая не завершилась из-за неудачной проверки. Очень признателен, если эксперт может помочь, спасибо.