W budowie
JavaScript w przeglądarce · Moduł 07

Pobieranie danych z kontrolek formularza

Odczyt wartości z pól tekstowych, numerycznych, list rozwijanych (select), przycisków radiowych oraz pól wielokrotnego wyboru (checkbox).

  • 45 min
  • 16 slajdów
  • Notatki nauczyciela: N
  • Strona modułu: otwórz
Plan · 45 min

Co dziś robimy

  1. 12 minOdczyt pól tekstowych i numerycznych Kluczową zasadą przy pracy z formularzami jest świadomość, że właściwość value zawsze…
  2. 12 minListy rozwijane i grupy opcji Przyciski jednokrotnego wyboru ( <input type="radio"> ) tworzą grupę dzięki…
  3. 12 minObsługa pól wyboru (checkbox) Częstym błędem jest próba odczytywania stanu zaznaczenia poprzez właściwość value .
  4. 4 minĆwiczenia 16 zadań w module — wybierz 3–4 na lekcję
  5. 5 minPodsumowanie bilet wyjściowy i zadanie domowe
Atom 1 z 3 · ~12 min

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 .

  • 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…
  • Próba wykonania operacji dodawania na nieprzekonwertowanych wartościach skończy się połączeniem tekstów (np.
  • 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) .
Kod · atom 1 · ~3 min

Jak to wygląda w kodzie

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ł';
}
Przykład na żywo · atom 1 · ~3 min

Uruchom i pokaż

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ł';
}
Sprawdzenie · atom 1 · ~2 min

Pytanie do klasy

Jakiego typu wartość zwraca pole input o atrybucie type="number" poprzez właściwość value?

Atom 2 z 3 · ~12 min

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

  • 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…
  • Zwrócony element reprezentuje zaznaczoną opcję, z której odczytujemy właściwość value .
Kod · atom 2 · ~3 min

Jak to wygląda w kodzie

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ł';
}
Przykład na żywo · atom 2 · ~3 min

Uruchom i pokaż

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ł';
}
Sprawdzenie · atom 2 · ~2 min

Pytanie do klasy

W jaki sposób odczytać aktualnie wybraną wartość z elementu select o identyfikatorze miasto?

Atom 3 z 3 · ~12 min

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

  • 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…
  • Jeśli w formularzu znajduje się wiele pozycji tej samej kategorii, możemy również pobrać wszystkie zaznaczone pola za pomocą…
Kod · atom 3 · ~3 min

Jak to wygląda w kodzie

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ł';
}
Przykład na żywo · atom 3 · ~3 min

Uruchom i pokaż

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ł';
}
Sprawdzenie · atom 3 · ~2 min

Pytanie do klasy

Która właściwość elementu checkbox w JavaScript informuje, czy pole jest aktualnie zaznaczone?

Praca własna · ~4 min

Ćwiczenia w module (16)

Zamknięcie · ~3 min

Co zabrać z lekcji

  • 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…
  • Przyciski jednokrotnego wyboru ( <input type="radio"> ) tworzą grupę dzięki współdzieleniu tego samego atrybutu name .
  • Częstym błędem jest próba odczytywania stanu zaznaczenia poprzez właściwość value .
Bilet wyjściowy: Jak pobrać listę wszystkich aktualnie zaznaczonych pól wyboru o klasie dodatek?
Odpowiedź: d) Za pomocą selektora document.querySelectorAll('input.dodatek:checked')
Hyżyk· Pobieranie danych z kontrolek formularza moduł 1 / 1