Logo Media Nauka

Facebook

Formularze w JavaScript

Jeżeli chcemy reagować na to, co użytkownik wpisuje w pola formularza na stronie internetowej, zanim cokolwiek wyśle na serwer, to JavaScript jest w tym momencie nieoceniony.

Dostęp do pól formularza

Dostęp do pól formularza odbywa się w różny sposób, w zależności od typu pola.

Text

Do pól formularza typu text odwołujemy sie poprzez wartość value.

Przykład 1 - odczyt pola formularza - TEXT

<input type="text" id="pole" value="Kubuś Puchatek">

<script>
 alert(document.getElementById("pole").value);
</script>
Lupa



Radio

Do pól formularza typu radio odwołujemy sie poprzez wartość checked oraz value.

Przykład 2 - odczyt pola formularza - RADIO

<fieldset>
    <legend>Wybierz</legend>
    <input type="radio" value="A" name="radio"> A
    <input type="radio" value="B" name="radio"> B
    <input type="radio" value="C" name="radio" checked> C
</fieldset>

<script>
var f = document.getElementsByName('radio');
var v;
for(var i = 0; i < f.length; i++){
    if(f[i].checked){
        v = f[i].value;
    }
}
alert(v);
</script>
Lupa

Wybierz A B C

Checkbox

Do pól formularza typu checkbox odwołujemy sie poprzez wartość checked i value.

Przykład 3 - odczyt pola formularza - CHECKBOX

<fieldset>
<legend>Wybierz ptaki:</legend>
<input type="checkbox" value="kos" name="ptaki" /> kos<br>
<input type="checkbox" value="gil" name="ptaki" /> gil<br>
<input type="checkbox" value="paw" name="ptaki" /> paw<br>
<input type="checkbox" value="emu" name="ptaki" /> emu<br>
</fieldset> <script> var f = document.getElementsByName('ptaki');
var v ='';
for(var i = 0; i < f.length; i++){
if(f[i].checked){
v = v+' '+ f[i].value;
}
}
if (v=='') {v="Nie dokonałeś żadnego wyboru.";}
alert(v); </script>
Lupa

Wybierz ptaki: kos
gil
paw
emu


Select

Do pól formularza typu select odwołujemy sie poprzez właściwość value, selectedIndex.

Przykład 4 - odczyt pola formularza - SELECT

Możemy się odnieść do właściwości value pola select, aby odczytać wartość tego pola. Z kolei właściwość selectedIndex przechowuje indeks wybranej opcji. Właściwość length przechowuje liczbę pozycji do wyboru pola select.

<select id="ssaki">
<option value="kot">kot</option>
<option value="jeż">jeż</option>
<option value="ryś">ryś</option>
<option value="koń">koń</option>
</select> <script> var s=document.getElementById("ssaki");
alert('Value przechowuje wartość: '+s.value);
alert('selectedIndex zwraca wartość: '+s.selectedIndex);
alert('length zwraca wartość: '+s.length); </script>
Lupa


Dzięki options i Option możemy dodawać pola do pola formularza typu select (jeżeli podamy kolejny indeks lub zmieniać, jeżeli tylko podamy istniejący indeks. Obiekt Option przyjmuje 4 parametry: tekst pola option, wartość pola option, flaga defaultSelected i flaga selectedIndex.

Nasz skrypt dodaje do powyższego pola typu select jedną pozycję o wartości "jeleń" i ustawia wybór tego pola na true.

Przykład 5 - dynamiczne dodawanie pól do pola select

<script>
 document.getElementById('ssaki').options[4] = new Option('jeleń', 'jeleń', 0, 1);
</script>
Lupa

Weryfikacja formularzy

Weryfikacja danych powinna przebiegać w 3 krokach:

  • Pierwszy etap - stosowanie podpowiedzi w czasie wprowadzania danych przez użytkownika z wykorzystaniem zdarzeń change, select, focus, blur
  • Drugi etap - walidacja danych przed wysłaniem na serwer. Jeżeli nie są poprawne , informujemy o tym użytkownika i nie wykonujemy przesyłania danych.
  • Trzeci etap - sprawdzenie przesłanych danych po stronie serwera (php, cgi, inne). Jeżeli dane są błędne, wówczas wracamy do formularza, wyświetlając odpowiednią informację.

© medianauka.pl, 2016-12-27, ART-3355


Inne zagadnienia z tej lekcji

Ciasteczka (cookies)Ciasteczka (cookies)
Jak w JavaScript obsługiwać ciasteczka (cookies)? Jest to pakiet informacji, które serwer przekazuje przeglądarce internetowej podczas pierwszej wizyty, a także z których korzysta za każdym następnym razem.
StorageStorage
Storage jest wygodniejszą alternatywą dla ciasteczek. Nie jest jednak obsługiwany przez stare wersje przeglądarek. Używanie storage jest trywialnie proste. Możemy zapisać i odczytać dane.
Okna w JavaScriptOkna w JavaScript
Okna w JavaScript. Większość przeglądarek domyślnie blokuje otwieranie nowych okien i zakładek z poziomu kodu. W niniejszym artykule omówię działanie okienek, właściwości i metody obiektu Window.
Funkcje wywoływane czasowo w JavaScriptFunkcje wywoływane czasowo w JavaScript
Funkcje wywoływane czasowo w JavaScript. JavaScript daje możliwość wywoływania własnej funkcji co określony czas lub po upływie określonego czasu. Jednostką czasu jest milisekunda. Wystarczy pamiętać, że 1 sekunda - 1000 milisekund.







Polecamy w naszym sklepie

laboratorium w szufladzie Modelarstwo i robotyka
Kolorowe skarpetki urodzinowe
kolorowe skarpetki góra lodowa
Mapa świata Puzzle
Kolorowe skarpetki Miasto
Niektóre treści nie są dostosowane do Twojego profilu. Jeżeli jesteś pełnoletni możesz wyrazić zgodę na przetwarzanie swoich danych osobowych. W ten sposób będziesz miał także wpływ na rozwój naszego serwisu.
© ® Media Nauka 2008-2020 r.