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>

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>

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>

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>

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>

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ę.

Inne zagadnienia z tej lekcji

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