Zdarzenie onSubmit w JavaScript

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Co to jest onSubmit?

onSubmit to zdarzenie JavaScript związane z wysyłaniem formularza HTML. Uruchamia się w momencie, gdy użytkownik próbuje wysłać formularz, np. klikając przycisk submit albo naciskając Enter w polu formularza.

Najczęściej używa się go do sprawdzenia danych przed wysłaniem formularza. Jeśli dane są poprawne, formularz może zostać wysłany. Jeśli są błędne, skrypt może zatrzymać wysyłanie.

Przykład użycia w HTML

<form onsubmit="return sprawdzFormularz()">
  <input type="text" id="login">
  <input type="submit" value="Wyślij">
</form>

<script>
function sprawdzFormularz() {
  const login = document.getElementById('login').value;

  if (login === '') {
    alert('Podaj login');
    return false; // zatrzymuje wysłanie formularza
  }

  return true; // pozwala wysłać formularz
}
</script>

Kontrolowanie wysłania formularza

Zdarzenie onSubmit pozwala zdecydować, czy formularz ma zostać wysłany:

  • return true - formularz zostanie wysłany,
  • return false - formularz nie zostanie wysłany.

W nowocześniejszym zapisie można użyć metody addEventListener() i preventDefault():

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault(); // blokuje domyślne wysłanie formularza
  alert('Formularz zatrzymany do sprawdzenia');
});

Ważne na egzaminie

Jeśli pytanie dotyczy uruchomienia skryptu przy wysyłaniu formularza HTML, poprawną odpowiedzią jest onSubmit. onClick dotyczy kliknięcia elementu, a onChange zmiany wartości pola formularza.