Przechwytywanie danych z poszczególnych typów pól oraz wstawianie wartości do formularza.

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.