JAVASCRIPT Formularze
Do zobrazowania sposobu odbioru danych z poszczególnych typów pól formularza posłużmy się przykładem:
<form name='formularz'> <input type='text' name='tekst' onkeyup="przeslij()"><br> <input type="checkbox" name="zaznacz" onchange="przeslij()" /><br> <input type="radio" name="wybierz" value="opcja1" onchange="przeslij()" /><br> <input type="radio" name="wybierz" value="opcja2" onchange="przeslij()" /><br> <select name='lista' onchange="przeslij()"> <option>Pierwsza</option> <option>Druga</option> </select> <br> <textarea name="pole" onkeyup="przeslij()">Pole tekstowe</textarea> </form> <div id="wynik"></div>
function przeslij(){ var tekst = document.forms["formularz"].tekst.value; var zaznacz = document.forms.formularz.elements["zaznacz"].checked ? "tak" : "nie" var wybierz = ""; for(var i=0; i<document.forms.formularz.wybierz.length; i++){ if(document.forms.formularz.wybierz[i].checked) wybierz = document.forms.formularz.wybierz[i].value; } var lista = document.forms.formularz.elements["lista"].value; var pole = document.forms.formularz.pole.value; document.getElementById("wynik").innerHTML = tekst + " | zaznaczone: " + zaznacz + " | wybrano: " + wybierz + " | z listy: " + lista + " | pole tekstowe: " + pole; }
Formularz zawiera podstawowe typy pól: pole tekstowe, checkbox, radio oraz select.
Funkcja przeslij() odczytuje dane z formularza w momencie ich zmiany i wypisuje w locie zawarte w formularzu informacje na ekran.
var tekst = document.forms["formularz"].tekst.value;
Odczytanie wartości (value) z pola tekstowego o nazwie tekst z formularza o nazwie formularz.
Alternatywna forma zapisu:
document.forms.formularz.tekst.value;
Sprawdzenie czy konkretne pole tekstowe zostało zaznaczone zwraca nam wynik 0 (nie) lub 1 (tak). Dokonujemy tego wykorzystując checked.
document.forms.formularz.elements["zaznacz"].checked
Bardziej skomplikowanie wygląda sprawa z polem opcji – radio.
Wykorzystujemy mechanizm pętli, który wykona się tyle razy, ile pól radio o danej nazwie zawiera formularz. Dla każdego pola osobno sprawdzamy czy jest zaznaczone. W przypadku gdy jedno z nich zostało zaznaczone pobieramy jego wartość i przypisujemy do zmiennej wybierz.
var wybierz = ""; for(var i=0; i<document.forms.formularz.wybierz.length; i++){ if(document.forms.formularz.wybierz[i].checked) wybierz = document.forms.formularz.wybierz[i].value; }
Pobranie wartości wybranej pozycji listy wygląda identycznie jak w przypadku pola tekstowego:
var lista = document.forms.formularz.lista.value;
Podobnie ma się sprawa z obszarem tekstowym (textarea):
var pole = document.forms.formularz.pole.value;
Na drugim przykładzie omówimy możliwość skryptowego ingerowania w wartości oraz właściwości pól formularza.
<form name='formularz2'> <label>Imie: </label><input type='text' name='imie'><br> <label>Zablokowane: </label><input type="checkbox" name="przelacznik" onchange="onoff()" /><br> <label>Ustaw Adam: </label><input type="checkbox" name="konkret" onchange="ustaw()" /><br> </form>
function onoff(){ if(document.forms.formularz2.elements["przelacznik"].checked ) document.formularz2.imie.disabled = true; else document.formularz2.imie.disabled = false; } function ustaw(){ if(document.forms.formularz2.elements["konkret"].checked ){ document.formularz2.imie.value = "Adam"; document.formularz2.imie.disabled = true; document.forms.formularz2.elements["przelacznik"].checked = true; }else{ document.formularz2.imie.value = ""; document.formularz2.imie.disabled = false; document.forms.formularz2.elements["przelacznik"].checked = false; } }
Funkcja onoff() dezaktywuje i aktywuje pole imie formularza formularz2 w zależności od jego aktualnego stanu.
Wykorzystuje do tego własność disabled, ustawiając ją na true lub false. W identyczny sposób moglibyśmy ustawić pole formularza na tryb tylko do odczytu – wykorzystując zamiast disabled – readonly.
Funkcja ustaw(), po zaznaczeniu drugiego przełącznika o nazwie konkret, ustawia wartość pola imie na Adam, dezaktywuje je oraz zaznacza pierwszy przełącznik. W przypadku odznaczenia czyści pole imie, aktywuje je i odznacza pierwszy przełącznik.