Logo Serwisu Media Nauka


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:


© Media Nauka, 2016-12-27, ART-3355






Polecamy koszyk