Как осуществить событие отправки формы (form.submit()) без перезагрузки страницы?

Question

[ZaxapKramer]

Делаю так:

document.getElementById("form").addEventListener('submit', function(e) {
    e.preventDefault();
    console.log("Form has submited");
});

document.getElementById("btn").addEventListener('click', function(e) {
    document.getElementById("form").submit(); // .submit(function(e){e.preventDefault()}) // .submit(false) - ничего не меняется...
})

При обычной отправке формы все в порядке. Тем не менее, при нажатии на кнопку все равно происходит перезагрузка страницы. Как решить эту проблему?

Answer 1

[Дмитрий Королев]

Предполагаю, что в случае кнопки в данном случае нужно использовать не .submit(), а trigger("submit")
Тогда будет вызван верхний обработчик 'submit', который запретит отправку формы. Можно в конце обработчика еще написать
return false;

https://learn.javascript.ru/forms-submit

Чтобы отправить форму на сервер из JavaScript – нужно вызвать на элементе формы метод form.submit().
При этом само событие submit не генерируется. Предполагается, что если программист вызывает метод form.submit(), то он выполнил все проверки.

UPD

Не часто пользуюсь нативным js, а вышеуказанный код предназначен для jQuery
Проверил код, который ниже, работает.

<form id="form" method="GET">
	<input type="text"/>
	<button id="form-btn">Button</button>
</form>
<button id="btn">Button</button>

document.getElementById("form").addEventListener('submit', function(e) {
    e.preventDefault();
    console.log("Form has submited");
});
document.getElementById("btn").addEventListener('click', function(e) {
	var ev = new Event("submit");
    console.log("Btn click");
    document.getElementById("form").dispatchEvent(ev);
});

Comments

[ZaxapKramer]

Спасибо! Благодаря вашему упоминанию tirgger "выкопал" new Event - подумал, что там какая-то неведомая магия... Очень благодарен за "код ниже": он помог развеять все непонятки, связанные с сонными поисками адекватного решения. Желаю удачи:)