JavaScript: Wartości pól formularza

0:00W tej lekcji poruszam temat tego, jak odczytywać wartości pól formularza i to

0:04będzie przydatne szczególnie wtedy, kiedy już poznasz w jednym z kolejnych

0:07rozdziałów, w jaki sposób przypisywać zdarzenia.

0:10Wówczas będziemy mogli zareagować na to,

0:12jak ktoś kliknie w przycisk wyślij i odczytać sobie wtedy wszystkie pola formularza.

0:17Więc w tej lekcji pokażę Ci po prostu, jak mając odwołanie do danego pola można

0:21odczytać jego wartość i będzie to różnie wyglądać w przypadku np.

0:25takiego selecta czy checkbox albo zwykłego pola.

0:28Więc mamy taki oto formularz.

0:30Jak widzisz przede wszystkim mamy tutaj elementy o różnym typie.

0:33Mamy typ text czy jest to input tekstowy, mamy

0:37select, mamy właśnie jakiś input o typie checkbox.

0:41Wszystkie z nich mają atrybuty name, co będzie istotne i np.

0:45w przypadku tego pierwszego elementu od razu dodaliśmy atrybut value, który

0:49sprawia, że jakaś wartość jest tutaj ustawiona.

0:52Wyobrażamy sobie po prostu, że mamy formularz do zmiany danych,

0:54on jest wczytywany z serwera już z uzupełnionymi danymi, które wcześniej

0:58podaliśmy, więc w kodzie HTML wyglądałoby to dokładnie tak.

1:02Teraz będę chciał sobie znaleźć uchwyt do

1:04całego tego formularza, czyli jest to main form.

1:08Zrobimy to znaną nam już metodą querySelector myForm.

1:13I teraz wewnątrz tego formularza będziemy wyszukiwać poszczególnych pól.

1:17Mając odwołanie do myForm, czyli do

1:19tego formularza, możemy sobie znaleźć taki input po np.

1:23tym name firstName, ale pokażę Ci, że

1:25również możemy skorzystać z ciekawego skrótu, który działa na formularzach.

1:29Jeżeli mamy odwołanie do formularza, to

1:31wszystkie pola, które w nim się znajdują to ich atrybuty

1:34name stają się właściwościami

1:36na tym obiekcie form i te właściwości kierują do poszczególnych pól.

1:40Czyli jak mamy firstName podany w name to mogę powiedzieć form.firstName

1:44i w tym momencie mam już uchwyt do tego

1:46elementu, tak samo jakbym go wyszukał z querySelector. Czyli dokładnie na nim

1:51mogę wtedy operować. I pokażę Ci jak odczytać jego wartość.

1:54Zrobimy sobie to może w konsoli.

1:59Czyli pamiętaj na tym etapie mamy odwołanie do elementu input

2:02i za pomocą właściwości value możemy odczytać jego aktualną wartość.

2:07Zobaczmy. Wyświetli nam się Jan.

2:10Dokładnie w taki sam sposób będziemy mogli

2:12zmieniać wartość lub tę wartość ustawiać, więc odwołajmy się do form.lastName.

2:17To z kolei sprawi, że będziemy mieli

2:18uchwyt do tego elementu i ustawimy sobie jego wartość np.

2:22na Kowalski.

2:23A więc w ten sposób można to zrobić dynamicznie.

2:26Zauważ ta wartość została teraz tutaj ustawiona.

2:29Jeżeli chodzi np.

2:30o pole textarea, które tutaj mamy, to z nim sytuacja wygląda tak samo.

2:35Jak mamy name message to możemy się

2:37również odwołać do form, następnie message i ustawić mu wartość.

2:42Tak jak wspomniałem raczej będziemy zazwyczaj wartości odczytywać,

2:45czyli jak coś klikniesz na taki przycisk wyślij,

2:47wtedy wywołamy funkcję, w której właśnie sprawdzili byśmy jaka jest wartość.

2:50Te wartości, co ważne zawsze są zwracane jako string.

2:53Czyli nawet jeżeli ktoś tutaj w Jan wpisał by 20, to w momencie kiedy my to odczytamy

2:59poprzez value otrzymamy tam string 20 czyli coś takiego.

3:03To też warto zapamiętać.

3:04Nie ma tutaj żadnej konwersji np.

3:08na liczby.

3:09Jeżeli ktoś nic nie wpisze to nie

3:11otrzymamy ani undefined, ani null, ale otrzymamy wtedy taki pusty ciąg znaków,

3:16więc to będzie istotne w momencie kiedy będziesz robił np.

3:18jakieś if i będziesz chciał sobie porównać.

3:21Jeżeli coś jest pustym ciągiem znaków to

3:23znaczy, że ktoś nic nie wpisał, ale w zasadzie wtedy również

3:26jeżeli zrobisz coś takiego i zostanie to

3:28podstawiony pusty ciąg znaków też oznacza, że ktoś nic nie wpisał.

3:32OK, będę chciał sobie tutaj ustawić tą treść, żeby Ci to zostało w plikach źródłowych,

3:36żebyś po prostu widział, że na textarea działamy dokładnie w taki sam sposób.

3:41Jeżeli chodzi o te podświetlenia to one też wynikają tutaj z tego sprawdzenia, z

3:45tej analizy w akurat w tym przypadku one nie mają żadnego znaczenia.

3:49Jak zatem widzisz z polami o typie input

3:51pracujemy z użyciem właściwości value i odczytujemy je ustawiamy,

3:55natomiast jak myślisz, jak będzie w przypadku takiego elementu select?

3:59Odwołamy się do niego po jego name, czyli subject.

4:01Nie musimy go wyszukiwać, ale możesz zrobić również form.querySelector

4:05select albo zrobimy form następnie subject i na nim również jest właściwość value.

4:11Zobaczmy sobie w konsoli jaka jest aktualna wartość tego pola.

4:18Zobaczymy pytanie. Teraz skąd to się bierze?

4:22Jeżeli sobie zerkniemy mamy tutaj opcje i dokładnie w value danej opcji, która jest

4:27aktualnie wybrana to jest to co będzie zwracane.

4:30Tutaj została zaznaczona domyślnie ta

4:33pierwsza opcja, bo nie ma żadnej innej pustej.

4:35Natomiast jeżeli byśmy wybierali prośba i spróbowali to odczytać to otrzymamy value

4:40nie takie jak jest tutaj, bo to jest tylko tzw.

4:42label, ale taki jak jest w tym miejscu. Czyli dokładnie to zostanie zwrócone.

4:47Pytanie zatem czy możemy również sterować

4:49tym value, żeby zaznaczyć jakiś inny element, np.

4:52zgłoszenie. Spróbujmy, odwołamy się do form.subject.value

4:56i ustawimy to na zgłoszenie na taki oto string.

5:00Zobaczmy. Jak widzisz również zostało to tutaj

5:03przedstawione, aczkolwiek moglibyśmy to zrobić również inaczej.

5:06Mógłbyś sobie wyszukać konkretnego elementu option np.

5:09z querySelector i ustawić jego atrybut poprzez set attribute na selected.

5:15Jeżeli byś zrobił coś takiego, również

5:17dane pole będzie automatycznie zaznaczone, a wtedy na tym select,

5:22jak odczytamy jego value to będzie to wartość właśnie zaznaczonego option.

5:27OK. I został nam jeszcze checkbox.

5:29W jaki sposób odczytujemy wartość checkbox?

5:32Mamy tutaj name remember.

5:34Zobaczmy console.log for.remember i następnie value.

5:39Co nam to zwróci?

5:40Jak widzisz zwróciło nam value on.

5:43Czyli jak on jest ustawiony to będzie miał value on,

5:46ale to jest trochę mylące, dlatego, że on przecież nie był zaznaczony.

5:50Oznacza to tylko tyle, że value nie jest

5:52dobrym wyznacznikiem tego, czy checkbox jest zaznaczony czy nie.

5:56W przypadku checkboxów będziemy korzystać z właściwości checked.

6:00Ona wygląda w ten sposób i ona już nie zwraca stringu, ale zwraca true lub false.

6:05Zobaczmy.

6:06Otrzymaliśmy false, bo to pole nie jest zaznaczone.

6:08Teraz jak go zaznaczę i byśmy jeszcze raz

6:11mogli się do niego odwołać to zwróci nam to już true.

6:14Co ważne, tą właściwość można również

6:16ustawiać, więc moglibyśmy powiedzieć form.remember.checked i ustawić ją na true.

6:22Wtedy automatycznie ten element możemy odświeżyć stronę,

6:25jak widzisz, jest zaznaczony.

6:27Równie dobrze moglibyśmy tutaj przypisać atrybut checked w ten sposób,

6:32albo z góry, jeżeli chcielibyśmy, żeby to było od razu zaznaczone, albo z użyciem

6:36JavaScript za pomocą setAttribute checked na wartość true.

6:41To zatem tyle, jeżeli chodzi o podstawy pracy z formularzami.

6:44Jak widzisz, zazwyczaj będziemy ustawiać i odczytywać wartości pól za pomocą

6:48właściwości value, a w przypadku takich pól jak np.

6:51checkbox będzie ta właściwość checked. Value

6:54zapamiętaj zawsze zwraca string albo pusty string albo wartość jaka jest wpisana,

6:59natomiast checked zwraca wartość typu prawda lub fałsz.