jQuery Academy · Lekcja

Dynamiczne modyfikowanie pól formularza

Dynamiczne modyfikowanie pól formularza to bezpłatna lekcja jQuery Academy na CoddyKit. To lekcja 1 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej jQuery Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs jQuery Academy zawiera 3 lekcji w sumie.

Dynamiczne formularze: dlaczego i jak

Formularze często są statyczne, ale nowoczesne aplikacje internetowe opierają się na interaktywności. Dynamiczne modyfikowanie pól formularza pozwala zmieniać jego strukturę w czasie rzeczywistym.

Oznacza to możliwość dodawania, usuwania lub modyfikowania pól wejściowych podczas interakcji użytkownika ze stroną. Zapewnia to znacznie lepsze wrażenia użytkownika i bardziej elastyczne formularze!

Dodawanie pól: podstawy

Podstawowa idea dodawania pól polega na tworzeniu nowych elementów HTML i wstawianiu ich do modelu obiektowego dokumentu (DOM).

Do tworzenia elementów należy używać jQuery (na przykład $('')).
Do precyzyjnego umieszczania ich w formularzu należy używać metod takich jak .append(), .prepend(), .after() lub .before().
Proszę pamiętać o nadawaniu nowym polom odpowiednich atrybutów name, szczególnie na potrzeby przetwarzania po stronie backendu.

Dodawanie nowego pola adresu e-mail

Dodajmy przycisk, który po kliknięciu utworzy nowe pole adresu e-mail. Proszę zwrócić uwagę, że najpierw tworzymy ciąg HTML, a następnie go dołączamy.

<div id="email-fields">
  <input type="email" name="email[]" placeholder="Email 1">
</div>
<button id="add-email">Add Another Email</button>

<script>
$(document).ready(function() {
  let emailCount = 1;
  $('#add-email').on('click', function() {
    emailCount++;
    const newEmailField = `
      <input type="email" name="email[]" 
             placeholder="Email ${emailCount}">
    `;
    $('#email-fields').append(newEmailField);
  });
});
</script>

Usuwanie pól: porządkowanie

Tak jak użytkownicy mogą potrzebować dodawać pola, często muszą również je usuwać. Dzięki temu formularz pozostaje przejrzysty i dopasowany do ich potrzeb.

Metoda jQuery .remove() doskonale się do tego nadaje. Całkowicie usuwa wybrane elementy z DOM, wraz z powiązanymi danymi i procedurami obsługi zdarzeń.

Usuwanie konkretnego pola

Rozszerzmy teraz nasz poprzedni przykład. Dodamy przycisk „Usuń” obok każdego pola adresu e-mail. Kliknięcie go usunie konkretne pole.

Ważne: Proszę zwrócić uwagę, jak obsługujemy zdarzenia dla dynamicznie dodawanych przycisków „Usuń”!

<div id="email-fields">
  <div class="email-group">
    <input type="email" name="email[]" placeholder="Email 1">
    <button class="remove-email">Remove</button>
  </div>
</div>
<button id="add-email">Add Another Email</button>

<script>
$(document).ready(function() {
  let emailCount = 1;

  $('#add-email').on('click', function() {
    emailCount++;
    const newEmailGroup = `
      <div class="email-group">
        <input type="email" name="email[]" 
               placeholder="Email ${emailCount}">
        <button class="remove-email">Remove</button>
      </div>
    `;
    $('#email-fields').append(newEmailGroup);
  });

  // Event delegation for remove buttons
  $('#email-fields').on('click', '.remove-email', function() {
    $(this).parent('.email-group').remove();
  });
});
</script>

Modyfikowanie pól: dostosowywanie atrybutów

Czasami nie trzeba dodawać ani usuwać pola, lecz jedynie zmienić jego właściwości. Może to być jego value, placeholder, stan disabled, a nawet name lub id.

jQuery udostępnia metodę .attr() do obsługi atrybutów HTML oraz .prop() do obsługi właściwości DOM. Metoda .prop() jest często preferowana w przypadku atrybutów logicznych, takich jak checked, disabled lub selected.

Przełączanie stanu pola

Oto przykład, w którym pole wyboru określa, czy pole tekstowe jest włączone, czy wyłączone. Do zmiany właściwości disabled używamy metody .prop().

<label>
  <input type="checkbox" id="enable-input"> Enable Input
</label>
<input type="text" id="my-input" value="Hello" disabled>

<script>
$(document).ready(function() {
  $('#enable-input').on('change', function() {
    const isChecked = $(this).is(':checked');
    $('#my-input').prop('disabled', !isChecked); // Set disabled based on checkbox state
  });
});
</script>

Zdarzenia dla elementów dynamicznych

Częsty problem: bezpośrednie procedury obsługi zdarzeń (takie jak $('#myButton').on('click', ...)) są przypisywane tylko do elementów obecnych podczas ładowania strony.

W przypadku elementów dodawanych dynamicznie potrzebna jest delegacja zdarzeń. Oznacza to przypisanie detektora zdarzeń do statycznego elementu nadrzędnego, a następnie określenie selektora dla dynamicznych elementów potomnych. Metoda jQuery .on() doskonale obsługuje ten mechanizm.

Praktyczny przykład „Dodaj więcej”

Łącząc zdobytą wiedzę, zobaczmy popularny wzorzec: przycisk „Dodaj umiejętność”, który pozwala użytkownikom wyświetlić wiele umiejętności, z których każda ma własny przycisk „Usuń”.

Proszę zwrócić uwagę na użycie data-id do unikatowej identyfikacji oraz .closest() do znalezienia elementu nadrzędnego, który należy usunąć.

<div id="skill-list">
  <div class="skill-item" data-id="1">
    <input type="text" name="skill[]" placeholder="Skill 1">
    <button class="remove-skill">Remove</button>
  </div>
</div>
<button id="add-skill">Add Skill</button>

<script>
$(document).ready(function() {
  let skillId = 1; // Unique ID for each skill item

  $('#add-skill').on('click', function() {
    skillId++;
    const newSkillItem = `
      <div class="skill-item" data-id="${skillId}">
        <input type="text" name="skill[]" 
               placeholder="Skill ${skillId}">
        <button class="remove-skill">Remove</button>
      </div>
    `;
    $('#skill-list').append(newSkillItem);
  });

  // Event delegation for remove buttons
  $('#skill-list').on('click', '.remove-skill', function() {
    // Prevent removing the very first skill if desired
    if ($('.skill-item').length > 1) {
      $(this).closest('.skill-item').remove();
    } else {
      alert("You need at least one skill!");
    }
  });
});
</script>

Sprawdzenie: dynamiczne formularze

Proszę sprawdzić swoją wiedzę na temat dynamicznego modyfikowania formularzy.

Podsumowanie: dynamiczne formularze

Na tej lekcji nauczył się Pan zwiększać interaktywność i wygodę formularzy dla użytkownika poprzez dynamiczne dodawanie, usuwanie i modyfikowanie pól za pomocą jQuery.

Do dodawania elementów należy używać metod .append(), .prepend(), .after() i .before().
Do usuwania elementów należy używać metody .remove().
Do modyfikowania atrybutów i właściwości elementów należy używać metod .attr() i .prop().
Co najważniejsze, w przypadku zdarzeń dotyczących elementów dodanych do DOM po początkowym załadowaniu strony należy stosować delegację zdarzeń z użyciem metody .on().

W następnej części zajmiemy się walidacją formularzy po stronie klienta!

Często zadawane pytania

Czy lekcja „Dynamiczne modyfikowanie pól formularza” jest bezpłatna?

Tak — pełny tekst „Dynamiczne modyfikowanie pól formularza” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu jQuery Academy, przejdź na CoddyKit PRO. Kurs jQuery Academy zawiera 3 lekcji w sumie.

Co nauczysz się w „Dynamiczne modyfikowanie pól formularza”?

Proszę nauczyć się dynamicznie dodawać, usuwać i modyfikować pola formularza na podstawie danych wprowadzanych przez użytkownika, tworząc elastyczne i interaktywne formularze za pomocą jQuery. Ćwiczysz jQuery Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć jQuery Academy?

Nie wymagamy żadnego doświadczenia. jQuery Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 3.

Ile czasu zajmuje lekcja „Dynamiczne modyfikowanie pól formularza”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji jQuery Academy?

Tak. Każda lekcja jQuery Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Dynamiczne modyfikowanie pól formularza
Logika walidacji formularzy po stronie klienta
Wysyłanie formularzy AJAX i informacja zwrotna

← Powrót do jQuery Academy