Как избежать дублирования post при отправке формы через ajax?
При отправке формы через ajax у меня даггые отправляются на сервер и закрывается модальное окно. Если же открыть его заново и снова отправить форму, браузер показывает, что post запрос удваивается. То есть отправляется старый и новый пост запрос. Как сделать правильно?
function addModification(){
const myForm = document.getElementById('Form');
myForm.addEventListener('submit', function (event) {
// Отменяем стандартное поведение формы
event.preventDefault();
// Получаем данные из формы
const formData = new FormData(myForm);
// Отправляем данные на сервер
fetch('/cp/catalog/products/edit-product/<?=$pid;?>', {
method: 'POST',
body: formData,
})
.then((response) => {
// Обрабатываем ответ от сервера
myForm.reset();
$('#addModificationModal').modal('hide');
console.log(response);
})
.catch((error) => {
// Обрабатываем ошибку
console.error(error);
});
});
}
На сервере стандартный php код.
Форма самая типичная - три поля и добавление файла
Вешать обработчик на форму при загрузке страницы, либо при физическом создании формы, если сайт работает в режиме одностраничника.
Либо вешать обработчик в единичном экземпляре: myForm.submit = function (event) {...
Либо выносим где-то глобально функцию в переменную, и навешиваем обработчик, когда добавляем событие, и убираем обработчик, когда закрываем окно:
let form_submit = function (event) {...};
function addModification(){
...
myForm.addEventListener('submit', form_submit);
...
}
function closeModalFrom()
{
....
myForm.removeEventListener('submit', form_submit);
....
}
