Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [php][js] Rozwijanie formularza przy użyciu checkoxa
Forum PHP.pl > Forum > Przedszkole
em-ba
5.02.2008, 13:36:10
Witam, chciałbym uzyskać taki efekt w formularzu rejestracyjnym, aby po zaznaczeniu checkboxa //jednego z dwóch - możliwość wyboru tylko jednego, rozwijała się lista pól wymaganych do rejestracji, adekwatna do checkboxa. Nie wiem w czym tkwi błąd, ale podejzewam, że może w samym skrypcie js ponieważ jeżeli kożystałem z jednego checkboxa to było ok - lista się rozwijała jak należy..

Będę wdzięczny za każdą pomoc..

oto skrypt zamieszczony w <head>
Kod
<script type="text/javascript">
        function showDiv(){
           var checkBox = document.getElementById('osobaprywatna');
           var oDiv = document.getElementById('a');
           if(checkBox.checked == true){
                oDiv.style.display = 'block';
           }
           else if(checkBox.checked == false){
                oDiv.style.display = 'none';
           }
        }
</script>
<script type="text/javascript">
        function showDiv(){
           var checkBox = document.getElementById('firma');
           var oDiv = document.getElementById('b');
           if(checkBox.checked == true){
                oDiv.style.display = 'block';
           }
           else if(checkBox.checked == false){
                oDiv.style.display = 'none';
           }
        }
</script>


a, no i sekcja <body>
[PHP] pobierz, plaintext 
  1. <?php
  2. <div id="top">
  3. 	  <div id="NAGLOWEK">naglowek</div>
  4. 		  <div id="FORM_REJ">
  5.  
  6.  
  7. 	<form action="form_rej.php" method="POST">
  8. 	  <fieldset>
  9. 		<legend>Wprowadz dane:</legend>
  10. 		  <div>
  11. 			<label for="osobaprywatna">osoba prywatna</label>
  12. 			<input id="osobaprywatna" name="osobaprywatna"  class="check" type="checkbox" onClick="showDiv()"/>&nbsp dane  osoby
  13. 			  <div id="a" style="display:none;">
  14. 				<div>
  15. 				  <div>
  16. 					<label for="imie">imię</label>
  17. 					<input id="imie" name="imie" class="text" type="text" />
  18. 				  </div>
  19. 				  <div>
  20. 					<label for="nazwisko">nazwisko</label>
  21. 					<input id="nazwisko" name="nazwisko" class="text" type="text" />
  22. 				  </div>
  23. 				  <div>
  24. 					<label for="haslo">hasło</label>
  25. 					<input id="haslo" name="haslo" class="password" type="password" />
  26. 				  </div>
  27. 				  <div>
  28. 					<label for="haslo">powtórz hasło</label>
  29. 					<input id="haslo" name="haslo2" class="password" type="password" />
  30. 				  </div>
  31. 				  <div>
  32. 					<label for="email">e-mail</label>
  33. 					<input id="email" name="email" class="text" type="text" />
  34. 				  </div>
  35. 				  <div>
  36. 					<label for="regon">regon</label>
  37. 					<input id="regon" name="regon" class="text" type="text" />
  38. 				  </div>
  39. 				  <div>
  40. 					<input id="submit" name="send" class="submit" type="submit" value="dodaj" />
  41. 				  </div>
  42. 				</div>
  43. 			  </div>
  44. 		  </div>
  45. 		  <div>
  46. 			<label for="firma">firma</label>
  47. 			<input id="firma" name="firma" class="check" type="checkbox" onClick="showDiv()"/>&nbsp dane firmy
  48. 			  <div id="b" style="display:none;">
  49. 				<div>
  50. 				  <div>
  51. 					<label for="imie">imię</label>
  52. 					<input id="imie" name="imie" class="text" type="text" />
  53. 				  </div>
  54. 				  <div>
  55. 					<label for="nazwisko">nazwisko</label>
  56. 					<input id="nazwisko" name="nazwisko" class="text" type="text" />
  57. 				  </div>
  58. 				  <div>
  59. 					<label for="haslo">hasło</label>
  60. 					<input id="haslo" name="haslo" class="password" type="password" />
  61. 				  </div>
  62. 				  <div>
  63. 					<label for="haslo">powtórz hasło</label>
  64. 					<input id="haslo" name="haslo2" class="password" type="password" />
  65. 				  </div>
  66. 				  <div>
  67. 					<label for="email">e-mail</label>
  68. 					<input id="email" name="email" class="text" type="text" />
  69. 				  </div>
  70. 				  <div>
  71. 					<label for="regon">regon</label>
  72. 					<input id="regon" name="regon" class="text" type="text" />
  73. 				  </div>
  74. 				  <div>
  75. 					<input id="submit" name="send" class="submit" type="submit" value="dodaj" />
  76. 				  </div>
  77. 				</div>
  78. 			  </div>
  79. 		  </div>	
  80.  
  81. 	  </fieldset>
  82. 	</form>
  83. ?>
[PHP] pobierz, plaintext
nowotny
5.02.2008, 15:50:32
Deklarujesz dwie takie same funkcje z których jedna nadpisuje drugą i tylko druga bedzie działać... Musisz zdeklarować jedną funkcje:
[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2.         function showDiv(what){
  3.            if (what=='firma'){
  4. 		 	var checkBox = document.getElementById('firma');
  5.            	var oDiv = document.getElementById('b');
  6.            }
  7.            else{
  8. 		 	var checkBox = document.getElementById('osobaprywatna');
  9.            	var oDiv = document.getElementById('a');
  10. 		 }
  11.            if(checkBox.checked == true){
  12.                 oDiv.style.display = 'block';
  13.            }
  14.            else if(checkBox.checked == false){
  15.                 oDiv.style.display = 'none';
  16.            }
  17.         }
  18. </script>
[HTML] pobierz, plaintext


i potem odwoływać się do niej z odpowiedni parametrem:
[HTML] pobierz, plaintext 
  1. <input id="osobaprywatna" name="osobaprywatna"  class="check" type="checkbox" onClick="showDiv('osobaprywatna')"/>&nbsp dane  osoby
  2.  
  3. oraz
  4.  
  5. <input id="firma" name="firma" class="check" type="checkbox" onClick="showDiv('firma')"/>&nbsp dane firmy
[HTML] pobierz, plaintext


Poza tym, do tego, żeby można było wybrać tylko jedną możliwość służą pola typu "radio"...
em-ba
5.02.2008, 16:04:07
ok, dzieki. sprawdziłem i fajnie działa...

masz rację z "radio" //..spróbuję zamienić, może się uda winksmiley.jpg
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.