MODUŁ 07

Pobieranie danych z kontrolek formularza

PPrezentacja dla nauczyciela

Formularze są głównym miejscem interakcji użytkownika ze stroną internetową. W tym module opanujesz precyzyjny odczyt danych z każdego typu kontrolki HTML: pól tekstowych i numerycznych, list rozwijanych, przycisków jednokrotnego wyboru oraz pól checkbox.

Odczyt pól tekstowych i numerycznych

Pola wprowadzania danych, takie jak <input type="text">, <input type="number"> czy wielowierszowe <textarea>, przechowują wpisaną przez użytkownika treść we właściwości value. Dostęp do niej uzyskujemy po pobraniu referencji do elementu za pomocą document.getElementById() lub document.querySelector().

Kluczową zasadą przy pracy z formularzami jest świadomość, że właściwość value zawsze zwraca ciąg znaków (typ string) — nawet wtedy, gdy znacznik posiada atrybut type="number". Próba wykonania operacji dodawania na nieprzekonwertowanych wartościach skończy się połączeniem tekstów (np. "15" + "10" da "1510" zamiast 25).

Przed wykonaniem obliczeń matematycznych wartość należy jawnie zrzutować na liczbę za pomocą Number(pole.value) lub parseFloat(pole.value). Przy prezentacji kwot i cen warto sformatować wynik do dwóch miejsc po przecinku za pomocą metody liczba.toFixed(2).

function obliczKosztPaliwa() {
  const litryPole = document.getElementById('iloscLitrow');
  const cenaPole = document.getElementById('cenaLitru');
  const wynik = document.getElementById('wynikPaliwa');

  const litry = Number(litryPole.value);
  const cena = Number(cenaPole.value);
  const razem = litry * cena;

  wynik.textContent = 'Koszt całkowity: ' + razem.toFixed(2) + ' zł';
}

Listy rozwijane i grupy opcji

Lista wyboru <select> udostępnia wybraną wartość bezpośrednio poprzez właściwość value całego elementu nadrzędnego. Wartość ta odpowiada atrybutowi value aktualnie zaznaczonego znacznika <option>. Nie ma potrzeby przeszukiwania tablicy opcji potomnych ani sprawdzania indeksów, jeśli zależy nam wyłącznie na odczytaniu zaznaczonego wariantu.

Przyciski jednokrotnego wyboru (<input type="radio">) tworzą grupę dzięki współdzieleniu tego samego atrybutu name. W danej chwili zaznaczony może być tylko jeden przycisk w grupie.

Najwygodniejszym i najbardziej niezawodnym sposobem pobrania wybranego przycisku radiowego jest użycie selektora CSS z pseudoklasą :checked w metodzie document.querySelector(), na przykład: document.querySelector('input[name="nazwaGrupy"]:checked'). Zwrócony element reprezentuje zaznaczoną opcję, z której odczytujemy właściwość value.

function podsumujWysylke() {
  const listaUslug = document.getElementById('usluga');
  const kosztWysylki = Number(listaUslug.value);

  const wybraneOpakowanie = document.querySelector('input[name="opakowanie"]:checked');
  const kosztOpakowania = Number(wybraneOpakowanie.value);

  const suma = kosztWysylki + kosztOpakowania;
  const wynik = document.getElementById('wynikKosztu');
  wynik.textContent = 'Łączny koszt zamówienia: ' + suma + ' zł';
}

Obsługa pól wyboru (checkbox)

Pola wielokrotnego wyboru (<input type="checkbox">) służą do włączania i wyłączania niezależnych opcji (np. dodatkowych usług czy akceptacji regulaminu). Do badania ich aktualnego stanu służy wyłącznie właściwość checked, która przyjmuje wartość logiczną true lub false.

Częstym błędem jest próba odczytywania stanu zaznaczenia poprzez właściwość value. Wartość pole.value w przypadku checkboxa zwraca stałą treść atrybutu (domyślnie ciąg "on"), niezależnie od tego, czy użytkownik zaznaczył pole, czy pozostawił je puste.

Podliczając zamówienie z wieloma opcjami, sprawdzamy stan poszczególnych kontrolek za pomocą prostych instrukcji warunkowych if (pole.checked) i dodajemy odpowiednie kwoty do sumy cząstkowej. Jeśli w formularzu znajduje się wiele pozycji tej samej kategorii, możemy również pobrać wszystkie zaznaczone pola za pomocą document.querySelectorAll('input[type="checkbox"]:checked').

function policzUslugiMyjni() {
  let koszt = 0;

  const mycie = document.getElementById('myciePodstawa');
  const wosk = document.getElementById('woskowanie');
  const wnetrze = document.getElementById('odkurzanie');

  if (mycie.checked) {
    koszt += 30;
  }
  if (wosk.checked) {
    koszt += 20;
  }
  if (wnetrze.checked) {
    koszt += 15;
  }

  const wynik = document.getElementById('podsumowanieMyjni');
  wynik.textContent = 'Koszt wybranych usług: ' + koszt + ' zł';
}

Ćwiczenia

• 1Odczyt tekstu z pola textareaPobierz treść wprowadzoną w wielowierszowym polu textarea i wyświetl ją w akapicie.Zadanie i podpowiedzi →
• 2Formatowanie kwoty metodą toFixed(2)Sformatuj wynik obliczenia ceny z dokładnością do dwóch miejsc po przecinku.Zadanie i podpowiedzi →
• 3Odczyt wybranej taryfy z listy selectPobierz wartość wybranej opcji z kontrolki select po naciśnięciu przycisku.Zadanie i podpowiedzi →
• 4Odczyt zaznaczonego przycisku radiowegoPobierz wartość zaznaczonej opcji w grupie radio za pomocą selektora :checked.Zadanie i podpowiedzi →
• 5Zabezpieczenie przed brakiem wyboru radioSprawdź, czy użytkownik zaznaczył opcję radio, zanim odczytasz jej właściwość value.Zadanie i podpowiedzi →
• 6Doliczanie opłaty za przesyłkę z checkboxaZbadaj stan właściwości checked i dolicz opłatę dodatkową do ceny bazowej.Zadanie i podpowiedzi →
• 7Dwa niezależne checkboxy opcji dodatkowychDolicz koszty dwóch niezależnych usług dodatkowych do kwoty bazowej.Zadanie i podpowiedzi →
• 8Zliczanie zaznaczonych checkboxówZlicz, ile checkboxów zostało zaznaczonych przez użytkownika.Zadanie i podpowiedzi →
• 9Radio wyboru pakietu i pole liczby sztukPołącz odczyt ceny z przycisków radiowych z liczbą sztuk z pola number.Zadanie i podpowiedzi →
• 10Wypożyczalnia sprzętu: select i pole dniOblicz koszt wynajmu na podstawie wybranego sprzętu z listy select oraz liczby dni.Zadanie i podpowiedzi →
• 11Podwójna walidacja formularza: tekst i regulaminSprawdź, czy pole tekstowe nie jest puste oraz czy użytkownik zaznaczył zgodę.Zadanie i podpowiedzi →
• 12Kalkulator malowania ścianOblicz koszt malowania na podstawie powierzchni z inputa i ceny farby z listy select.Zadanie i podpowiedzi →
• 13Wybór sposobu dostawy z przycisków radioOdczytaj koszt dostawy z zaznaczonego radio i zaktualizuj podsumowanie.Zadanie i podpowiedzi →
• 14Naliczenie rabatu wybranego z przycisków radioPobierz stawkę rabatu z grupy radio i obniż cenę początkową towaru.Zadanie i podpowiedzi →
• 15Podsumowanie koszyka: radio i checkboxyPołącz cenę bazową z przycisków radio z opłatami dodatkowymi z checkboxów.Zadanie i podpowiedzi →
• 16Kompleksowy kalkulator zamówienia pizzyZbuduj pełny formularz zamówienia łączący radio, select, checkboxy i formatowanie kwoty.Zadanie i podpowiedzi →