Jeżeli formularz jest zatwierdzany za pomocą przycisku typu submit, to działa metoda preventDefault(). Natomiast jeżeli zatwierdzam formularz poprzez metodę submit(), to formularz zostaje od razu przesłany. Dlaczego tak się dzieje? Czy jest możliwość, żeby programowo zatwierdzić formularz wywołując metodę preventDefault()?
Przykład:
https://jsfiddle.net/6Ljmrukt/
@Bednarus3 Zerknij na dokumentację: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
Odpowiedzią na Twoją zagadkę jest to, że wywołanie metody .submit()
na formularzu nie wysyła eventu submit
, więc Twój listener w ogóle nie zostanie wywołany. Możesz to zaobserwować w przykładzie który podesłałeś - klikając przycisk "Submit by method" nie widać alertu pokazanego w listenerze.
Zobacz tutaj: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event
Dziękuję panie kolego za nakierowanie na dokumentację. W niej znalazłem rozwiązanie problemu poprzez użycie metody requestSubmit()
zamiast submit()
.
Istnieje też metoda dispatchEvent
, która pozwala wywołać dowolne zdarzenie
const form = document.getElementById('my_form');
const submitEvent = new Event('submit', { cancelable: true });
form.addEventListener('submit', (event) => {
// Gdyby w konstruktorze zabrakło opcji "cancelable"
// to uruchomione zdarzenie zignorowałoby wywołanie event.preventDefault();
event.preventDefault();
console.log("hello");
});
form.dispatchEvent(submitEvent);
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent
https://developer.mozilla.org/en-US/docs/Web/API/Event/Event
Zarejestruj się i dołącz do największej społeczności programistów w Polsce.
Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.