JavaScript - obsługa formularzy w JavaScript, input, textarea, submit

Kod:

Ewentualne Objaśnienia:

Teraz zajmiemy się formularzami w połączeniu z JavaScript. Tutaj mamy prosty przykład na obliczanie iloczynu dwóch podanych liczb. Przykład jest moim zdaniem bardzo dobry bo pokazuje pewne działanie javaScript po wypełnieniu formularza. Sam przykład iloczynu może się przydać choćby w jakimś formularzu zamówienia na stronie aby podliczyć sumę zamówienia itp. . Podobną rzecz możecie zrobić choćby w PHP, ale na pewno zdajecie sobie sprawę, że tutaj JavaScript wykonywany jest bez żadnego przeładowania strony itd, co w przypadku PHP nie jest możliwe. Zresztą nie będę tego tłumaczył, skoro zdecydowałeś się na naukę JS to wiesz doskonale do czego służy ten język i jakie ma wady i zalety względem innych technologii.

Popatrzmy na przykład - mamy formularz, dwa pola input gdzie wpisujemy liczby, jedno pole gdzie ma pojawić się wynik iloczynu no i wiadomo przycisk submit, który po kliknięciu wywołuje napisaną przez nas funkcję obslugaFormularza , czyli :
- zmiennej liczba1 jest przypisana wartość z pola formularza o nazwie licz1, czyli uzyskujemy tą wartość poprzez : window.document.nazwa_formularza.nazwa_pola.value
- podobnie odczytujemy drugą liczbę
- obliczamy iloczyn
- do pola input o nazwie wynik wpisujemy wynik iloczynu

Zwróć uwagę, że po wywołaniu funkcji mamy return false, po to aby strona się nam nie przeładowała po kliknięciu, tylko żeby wykonał się JS i nic więcej. Należy pamiętać aby nadawać nazwy polom formularza oraz samemu formularzowi - w przypadku PHP zazwyczaj nazywanie samego formularza nie było konieczne.

Jeśli chodzi o inne elementy formularzy HTMLowych działamy podobnie, na przykład dopisanie wartości do jakiegoś elementu textarea :
- window.document.formularz.nazwa_pola.value = "Tutaj jakiś tekst, który sobie dopisujemy do pola typu textarea";

No i analogicznie można odczytać przez : var odczyt = window.document.formularz.nazwa_pola.value;