Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Wyświetlanie poszczególnych elementów formularza
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Galakar
Pracuję nad formularzem zgłoszeniowym na stronie. Jako że formularz jest dość długi nie chcę aby niepotrzebnie rozjeżdżał strony (nie trzeba wypełniać wszystkich pól). Spróbowałem ukryć jego poszczególne elementy poprzez javascript, ale nie mam pojęcia co zrobiłem źle.

Jak wygląda plika .js:
  1. <script type="text/javascript">
  2. function wys_form_test1()
  3. {
  4. <fieldset><legend>Kategoria 1</legend>
  5. <textarea name = "kat1" cols="50" rows="10">Proszę podać kandydatki w następującej formie: Imię - Tytuł</textarea>
  6. }
  7.  
  8. function wys_form_test2()
  9. {
  10. <fieldset><legend>Kategoria 2</legend>
  11. <textarea name = "kat2" cols="50" rows="10">Proszę podać kandydatki w następującej formie: Imię - Tytuł</textarea>
  12. }
  13.  
  14. function wys_form_test3()
  15. {
  16. <fieldset><legend>Kategoria 3</legend>
  17. <textarea name = "kat3" cols="50" rows="10">Proszę podać kandydatki w następującej formie: Imię - Tytuł</textarea>
  18. }


Jak wygląda kod strony:
  1. <!DOCTYPE html
  2. PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  5. <meta http-equiv="Content-Type" content="text/html" charset = "utf-8" />
  6. <meta http-equiv="Content-Language" content="pl" />
  7. <title>Test</title>
  8. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  9. <script src="/scripts/qTip.js" type="text/javascript"></script>
  10. <script src="/scripts/test.js" type="text/javascript"></script>
  11. </head>
  12. <form method=post action="zglosz.php">
  13. <div class = "m">
  14. <input type = "button" onclick = "wys_form_test1()" value = "Kategoria 1" /><br />
  15. <input type = "button" onclick = "wys_form_test2()" value = "Kategoria 2" /><br />
  16. <input type = "button" onclick = "wys_form_test3()" value = "Kategoria 3" /><br />
  17. <input type=submit value="Zgłoś"></div>
  18. </form>
  19. </body>
  20. </head>
Korab
HTML w JS? Nieźle pojechałeś...
Napisz sobie stronę tak, żeby wszystko było widoczne. W CSSie ustaw display:none, aby ukryć elementy formularza, które chcesz ukryć. W JS użyj czegoś takiego:
[JAVASCRIPT] pobierz, plaintext
  1. function pokaz(co) {
  2. document.getElementById(co).style.display = 'block';
  3. }
[JAVASCRIPT] pobierz, plaintext

A tym ukrywanym fieldsetom nadaj id - i przy wywoływaniu funkcji wywołuj ją dla konkretnego id. Przykład:

  1. <input type="button" onclick="pokaz('3');" value="Kategoria 3" /><br />
  2. <fieldset id="3" style="display: none;"><legend>Kategoria 3</legend>
  3. <textarea name = "kat3" cols="50" rows="10">Proszę podać kandydatki w następującej formie: Imię - Tytuł</textarea>
Galakar
To mam nauczkę na przyszłość żeby nie mieszać JS i HTML-a. Nie rozumiem zasad rządzących js. Wszystko jednak działa, więc dzięki za pomoc.
Korab
W sposób, który podałeś, możesz mieszać PHP i HTML, w taki sposób:
  1. <?php
  2. if ($bułka="z_masłem") {
  3. ?>
  4. <h1>Bułka z masłem</h1>
  5. <?php
  6. }
  7. else {
  8. ?>
  9. <h1>Zwykła bułka</h1>
  10. <?php
  11. }
  12. ?>
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.