Javascript | Formularze · Technik informatyk egzamin zawodowy

Programowanie / JS

Javascript | Formularze

Formularze HTML są kluczowym elementem stron internetowych umożliwiającym interakcję z użytkownikami. JavaScript pozwala na dynamiczną obsługę danych z formularzy – od ich odczytywania po modyfikowanie wartości i właściwości pól.

Przechwytywanie danych z formularza

Rozważmy formularz zawierający różne typy pól:

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

 

Funkcja odczytująca dane

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;
}

  • Pole tekstowe – odczytujemy przez właściwość .value.

  • Checkbox – odczytujemy właściwością .checked (zwraca true lub false).

  • Radio – używamy pętli, by sprawdzić, które pole jest zaznaczone.

  • Select oraz textarea – podobnie jak pole tekstowe (.value).

 

Dynamiczne modyfikowanie wartości formularza

JavaScript pozwala również dynamicznie zmieniać właściwości pól formularza:

<form name='formularz2'>
  <label>Imię: </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>

 

Funkcje modyfikujące pola formularza

function onoff(){
  document.formularz2.imie.disabled = document.forms.formularz2.przelacznik.checked;
}

function ustaw(){
  if(document.forms.formularz2.konkret.checked ){
    document.formularz2.imie.value = "Adam";
    document.formularz2.imie.disabled = true;
    document.forms.formularz2.przelacznik.checked = true;
  }else{
    document.formularz2.imie.value = "";
    document.formularz2.imie.disabled = false;
    document.forms.formularz2.przelacznik.checked = false;
  }
}

  • .disabled – blokuje pole formularza, uniemożliwiając interakcję.

  • .readonly – sprawia, że pole formularza jest tylko do odczytu (użytkownik nie może edytować).

Podobne wpisy