Jeśli chcemy aby nasz formularz dynamicznie dodawał nowe elementy do strony w zależności od tego jakie pole opcji ( ) zostało wybrane – możemy wykorzystać do tego funkcje z biblioteki jQuery

Thank you for reading this post, don't forget to subscribe!

, a mianowicie:
show() – funkcja ta sprawia, że element będzie widoczny. Nie wprowadzi żadnych zmian jeśli element ten jest już widoczny.
hide() – funkcja ta sprawia, że element stanie się niewidoczny. I podobnie jak show(), nie wprowadzi żadnych zmian jeśli element ten jest już niewidoczny.

Krok 1 – dołączanie biblioteki do strony

Na początku – rzecz jasna – należy dołączyć bibliotekę jQuery do naszej strony:

Zamieścić ją można pomiędzy znaczniki head

Krok 2 – Kod formularza i dodatkowych elementów

Następnie piszemy w html nasz formularz (sekcja body):

 

 Dzienny
 Tygodniowy
 Miesięczny
 Roczny

 
Co:  dzień (dni) 
 
Co:  tyg. w następującym dniu tygodnia:  
					
 
luorem ipsum dolor
 
sed do eiusm5od tempjor

 

Krok 3 – Kod css – dla ukrycia chwilowo niepotrzebnych elemenów.

Kolejnym krokiem będzie dodanie stylów dla klasy .desc do sekcji head:

Aby ukryć na początku wszystkie elementy klasy .desc

Krok 4 – Kod jQuery – dla wprowadzenia interakcji

Ostatecznym krokiem jest napisanie bardziej “zaawansowanego” kodu js, który dodać możemy zaraz pod kodem z kroku 1.

I od teraz możemy cieszyć się interaktywnością naszego formularza.

Oto przykład działania dla opcji Dzienny / Tygodniowy