onsubmit

Uruchamia kod JavaScript tuż przed wysłaniem formularza. Pozwala zatrzymać wysyłkę i obsłużyć dane w skrypcie.

Dotyczy: <form>

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Dostępne w kodzie atrybutu
Więcej przykładów
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

HTML

<form onsubmit="
  event.preventDefault();
  const email = this.elements.email.value;
  this.hidden = true;
  document.getElementById('thanks').textContent =
    'Dzięki! Link do pierwszej lekcji wysłaliśmy na ' + email + '.';
">
  <label for="email">E-mail</label>
  <input type="email" id="email" name="email" placeholder="ania@example.com" required>
  <button>Zapisz się na newsletter</button>
</form>
<p id="thanks"></p>

Podgląd

Najpierw spróbuj wysłać pusty formularz: przeglądarka pokaże błąd walidacji, a kod z onsubmit się nie uruchomi. Po wpisaniu poprawnego adresu formularz zniknie i pojawi się podziękowanie.

Definicja i zastosowanie

Atrybut onsubmit stawiasz na elemencie <form>. Zdarzenie submit zachodzi, gdy użytkownik wysyła formularz: klika przycisk wysyłający albo naciska Enter w polu tekstowym. Wcześniej przeglądarka sprawdza reguły walidacji, takie jak required czy type="email", i jeśli któreś pole jest błędne, zdarzenie w ogóle nie zachodzi.

Najczęściej wywołuje się w nim event.preventDefault(). Zatrzymuje to zwykłe wysłanie i przeładowanie strony, dzięki czemu możesz wysłać dane samodzielnie, np. przez fetch(), i pokazać wynik bez opuszczania strony. W atrybucie ten sam efekt daje return false.

W kodzie atrybutu this wskazuje formularz. Pola odczytasz przez this.elements, a wszystkie wartości naraz przez new FormData(this). Pamiętaj, że metoda form.submit() wywołana w skrypcie wysyła formularz bez zdarzenia submit i bez walidacji. Jeśli chcesz, żeby oba zadziałały, użyj form.requestSubmit(). W większych projektach dodaj obsługę przez addEventListener("submit", …).

Składnia

<form onsubmit="kod JavaScript">…</form>

Dostępne w kodzie atrybutu

event.preventDefault()
Zatrzymuje zwykłe wysłanie formularza i przeładowanie strony.
return false
Skrót działający tylko w atrybucie. Daje ten sam efekt co event.preventDefault().
this.elements
Pola formularza. Pole z name="email" odczytasz jako this.elements.email.value.
new FormData(this)
Wartości wszystkich pól z atrybutem name, gotowe do wysłania przez fetch().
event.submitter
Przycisk, którym wysłano formularz. Przydaje się, gdy formularz ma kilka przycisków, np. „Zapisz szkic” i „Opublikuj”.

Zapis	Opis
event.preventDefault()	Zatrzymuje zwykłe wysłanie formularza i przeładowanie strony.
return false	Skrót działający tylko w atrybucie. Daje ten sam efekt co `event.preventDefault()`.
this.elements	Pola formularza. Pole z `name="email"` odczytasz jako `this.elements.email.value`.
new FormData(this)	Wartości wszystkich pól z atrybutem `name`, gotowe do wysłania przez `fetch()`.
event.submitter	Przycisk, którym wysłano formularz. Przydaje się, gdy formularz ma kilka przycisków, np. „Zapisz szkic” i „Opublikuj”.

Więcej przykładów

Obsługa wysyłki przez addEventListener i FormData

HTML

<form id="signup">
  <label>Imię <input name="name" required></label>
  <label>Kurs
    <select name="course">
      <option>HTML i CSS</option>
      <option>JavaScript</option>
      <option>Python</option>
    </select>
  </label>
  <button>Zapisz mnie</button>
</form>
<p id="result"></p>

<script>
  document.getElementById('signup').addEventListener('submit', (event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    document.getElementById('result').textContent =
      data.get('name') + ', zapisaliśmy Cię na kurs ' + data.get('course') + '.';
  });
</script>

Podgląd

W prawdziwej aplikacji dane trafiłyby na serwer, np. przez fetch("/api/zapisy", { method: "POST", body: data }), a nie do akapitu na stronie.

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Obsługuj wysyłkę zdarzeniem submit na formularzu, a nie kliknięciem przycisku. submit łapie też wysłanie klawiszem Enter i uruchamia się dopiero po udanej walidacji.
Po event.preventDefault() to Ty odpowiadasz za informację zwrotną: pokaż, że dane się wysyłają, zablokuj przycisk przed podwójnym kliknięciem i wyświetl wynik albo błąd.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz HTML w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs