Не работает preventDefault() через событие onclick

Question

Есть форма:

<form onclick="editMainForm(this)" method="POST">
   <input type="text" name="name">
</form>

И ajax отправка этой формы:

function editMainForm(i) {
    // i.preventDefault();
    
    $.ajax({
        url: '../scripts/edit-main-form-script',
        method: 'POST',
        dataType: 'json',
        data: $(i).serialize(),
        success: function(data){
            if (data.status) {
                // Вывод ОК
            } else {
                // Вывод Ошибки
            }
        }
    });
};

Проблема: когда preventDefault закомменчен, то данные с формы отправляются, но не убирается перезагрузка страницы (это понятно). Но если раскомментировать preventDefault, то у меня стираются все данные при повторной отправке формы, и всё равно повторяется отправка формы при перезагрузке страницы.

Как я понял, было бы хорошо, если бы оно работало так - onclick="editMainForm(event,this)". Но так оно тем более не работает.

То есть, мне нужно воспользоваться и event и this, а указать я этого в событие onclick не могу.

Answer 1

Очень странно вешать onclick на саму форму, а не на кнопку. На мой взгляд проще добавить кнопку типа submit и повесить событие submit на форму, а в js обработать подтверждение формы. Там же и сделать preventDefault

$('#form').submit(function(e) {
  e.preventDefault();
  $.ajax({
    url: '../scripts/edit-main-form-script',
    method: 'POST',
    dataType: 'json',
    data: $(e.target).serialize(), // сериализация данных с формы
    success: function(data){
        if (data.status) {
            // Вывод ОК
        } else {
            // Вывод Ошибки
        }
    }
  });
})

<form id="form" method="POST">
   <input type="text" name="name">
  <button type="submit">Отправить</button> 
</form>

Answer 2

Никогда не вешайте события на form!

Решение:

<form id="editMainForm" method="POST">
   <input type="text" name="name">
   <button type="submit" onclick="editMainForm(event,this)">Отправить</button>
</form>

JS:

function editMainForm(i) {
    i.preventDefault();
    
    $.ajax({
        url: '../scripts/edit-main-form-script',
        method: 'POST',
        dataType: 'json',
        data: $('#editMainForm').serialize(),
        success: function(data){
            if (data.status) {
                // Вывод ОК
            } else {
                // Вывод Ошибки
            }
        }
    });
};

БЛОГ НА HUSL

Не работает preventDefault() через событие onclick

Ответы (2 шт):