Zdarzenia na przykładzie prostego formularza w JavaScript

Aby utrwalić temat zdarzeń, w tym artykule przejdziemy do praktyki. Utworzymy bardzo prosty formularz, na przykładzie którego przedstawię Ci kilka zdarzeń w JavaScipcie.

Co chcemy osiągnąć? Po pierwsze chcemy aby nasz formularz pobierał od użytkownika imię i nazwisko. Po aktywowaniu pola tekstowego, kolor jego tła będzie się zmieniał na żółty. Po najechaniu myszą na przycisk zapisz, kolor obramowania będzie zmieniał się na zielony, oraz po kliknięciu w przycisk zostanie wyświetlona wiadomość powitalna z wprowadzonym imieniem i nazwiskiem.

Z jakich zdarzeń będziemy musieli skorzystać? Na pewno poznane już we wcześniejszym artykule zdarzenie click, po którym zostanie wyświetlony komunikat. Ten komunikat będziemy wyświetlać za pomocą metody alert(), której jeszcze nie używaliśmy w kursie. Metoda ta wyświetla zwykły komunikat, okno dialogowe z odpowiednią wiadomością. Aby po najechaniu myszą na przycisk, zmieniało się obramowanie przycisku będziemy musieli użyć 2 zdarzeń mouseover oraz mouseout. Do zmiany koloru tła pól tekstowych będziemy potrzebować zdarzeń focus oraz blur. Ok, wiemy już wszystko, możemy zaczynać.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zdarzenia</title>
</head>
<body>

    <div id="container">
        <label>Imię:
            <input id="firstName">
        </label>
        <label>Nazwisko:
            <input id="lastName">
        </label>
        <button id="save">Zapisz</button>
    </div>

    <script src="js/skrypt.js"></script>
</body>
</html>

Do naszego szkieletu HTML zostały dodane 2 etykiety, 2 pola tekstowe oraz przycisk. Standardowo na dole strony zostało dodane odwołanie do pliku ze skryptami, gdzie będziemy pisać nasz kod JS. Zacznijmy od napisania zdarzenia, które zostanie wyzwolone po załadowaniu się naszej strony, dla przypomnienia będzie to zdarzenie DOMContentLoaded.

document.addEventListener('DOMContentLoaded', function(event) {
	//...
});

Teraz pobierzmy oraz przypiszmy do zmiennych obiekty, których potrzebujemy to znaczy pola tekstowe oraz przycisk. Możemy to zrobić, pobierając każdy input pokolei po id:

document.addEventListener('DOMContentLoaded', function(event) {
    let firstName = document.getElementById('firstName');
    let lastName = document.getElementById('lastName');
    let save = document.getElementById('save');  
});

Ale w tym przypadku, lepszym pomysłem będzie pobranie za pomocą metody querySelectorAll wszystkich pól tekstowych jednocześnie:

document.addEventListener('DOMContentLoaded', function(event) {
    let inputs = document.querySelectorAll('input');    
    let save = document.getElementById('save');
});

Następnie podepnijmy się pod zdarzenia, o których mówiliśmy na początku artykułu oraz zdefiniujmy odpowiednie callback'i. Musimy pamiętać o tym, że pod zmienną inputs znajduje się tablica obiektów, dzięki czemu możemy w pętli przypisać do nich zdarzenia.

document.addEventListener('DOMContentLoaded', function(event) {
    let inputs = document.querySelectorAll('input');    
    let save = document.getElementById('save');

    for (const input of inputs) {
        input.addEventListener('focus', function() {
            input.style.backgroundColor = 'yellow';
        });

        input.addEventListener('blur', function() {
            input.style.backgroundColor = 'white';
        });
    }

    save.addEventListener('mouseover', function() {
        save.style.borderColor = 'green';
    });

    save.addEventListener('mouseout', function() {
        save.style.borderColor = 'black';
    });

    save.addEventListener('click', function() {
        alert(`Cześć ${inputs[0].value} ${inputs[1].value}!`);
    });
});

Tak wygląda nasz kompletny kod w JavaScript. Oczywiście można pokusić się jeszcze o jakąś walidację, tak aby nie były przekazywane puste pola tekstowe, ale nie na tym chcemy się skupić w tym artykule. Jak widzisz, dlatego że w zdarzeniu mouseover zmieniamy kolor obramowania na zielony, dodatkowo musimy podpiąć się pod zdarzenie mouseout, tak aby z powrotem ustawić pierwotny kolor. To samo dotyczy zdarzeń focus oraz blur.

To wszystko co chciałem Ci przekazać w tym artykule. Zapraszam Cię do kolejnych artykułów z serii podstaw programowania w języku JavaScript.

Poprzedni artykuł - Zdarzenia w JavaScript.
Następny artykuł - Blokowanie domyślnej akcji zdarzenia w JavaScript.

Blog Dla Młodszych Programistów C#/.NET

Zdarzenia na przykładzie prostego formularza w JavaScript

Dodaj komentarz

Wyszukiwarka

Tagi

Najnowsze artykuły

Losowe artykuły