Ukrywanie i pokazywanie części formularza.

autor: Piotr 'zakaru' Szarmach, ostatnia modyfikacja: 2007-02-22

szukaj: ukrywanie zawartości formularza

Czasami wielu z nas chciałoby dodać troszkę "dynamizmu" i efektowności do zwykłych formularzy stworzonych w html-u. Otóż właśnie dzięki tej poradzie dowiesz się jak w bardzo prosty sposób ukrywać oraz pokazywać zawartość div-a, który domyślnie jest niewidoczny.

Na początku stwórz dwa pola wyboru typu "radio", ważne jest żeby obydwa pola miały taką samą nazwę, powiedzmy: nazwa_radio.

<p>Wyświetl diva:</p>

<p>
 <INPUT TYPE="radio" NAME="nazwa_radio" VALUE="tak" />tak</ br>
 <INPUT TYPE="radio" NAME="nazwa_radio" VALUE="nie" />nie
</p>

Teraz stwórzmy div-a (domyślnie ustawimy, że jest on niewidoczny) który wyświetli się po kliknięciu na jeden z radio buttonów.

<div style="display: none" id="ukryty">
 <hr />
 <p>Oto treść diva.</p>
 <hr />
</div>

Do uprzednio stworzonych przycisków dodamy teraz kod, dzięki któremu możliwe będzie pokazywanie oraz ukrywanie divów

<p>Wyświetl diva:</p>

<p>
 <INPUT TYPE="radio" NAME="nazwa_radio" VALUE="tak" onClick="document.getElementById('ukryty').style.display='block';" />tak</ br>
 <INPUT TYPE="radio" NAME="nazwa_radio" VALUE="nie" onClick="document.getElementById('ukryty').style.display='none';" />nie
</p>

I to już wszystko. Całość kodu strony powinna prezentować się mniej więcej tak:

<p>Wyświetl diva:</p>

<p>
 <INPUT TYPE="radio" NAME="nazwa_radio" VALUE="tak" onClick="document.getElementById('ukryty').style.display='block';" />tak</ br>
 <INPUT TYPE="radio" NAME="nazwa_radio" VALUE="nie" onClick="document.getElementById('ukryty').style.display='none';" />nie
</p>

<div style="display: none" id="ukryty">
 <hr />
 <p>Oto treść diva.</p>
 <hr>
</div>

Jak więc widać efekt ten jest całkiem prosty do uzyskania, ale daje nam wiele możliwości urozmaicenia naszego formularza.

Piotr 'zakaru' Szarmach

szukaj: ukrywanie zawartości formularza

Osoby czytające tę publikację przeglądały również:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!