Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JS, jQuery] dynamiczny formularz, ukrywanie i pokazywanie elementów, pokazywanie i ukrywanie elementu gdy zaznaczone są wymagane odpowiedzi
pavon
post 11.09.2017, 13:37:44
Post #1





Grupa: Zarejestrowani
Postów: 9
Pomógł: 0
Dołączył: 8.08.2017

Ostrzeżenie: (0%)
-----


Chciałbym utworzyć następujący formularz:
Składać się on będzie z kilku części. Każda część (kilka pytań, wszystkie z inputami typu radio) zamknięta będzie z jednym divie o pewnym id (w skład id dla ułatwienia będą wchodzić kolejne liczby od 1, czyli: "coś tam" + nr etapu). Pod każdym etapem znajduje się przycisk "dalej" za pomocą którego przejdziemy do następnego etapu (wyświetlimy kolejną serię pytań), ale tylko wtedy, jeśli w każdym pytaniu została udzielona odpowiedź. W przeciwnym wypadku przycisk powinien być nieaktywny (z atrybutem disabled). Jak osiągnąć taki efekt? Poniżej mały fragment kodu, jeśli komuś lepiej patrzy się w HTMLa niż w to co napisałem wink.gif
  1. <div id="step1">
  2. treść pytania pierwszego<br>
  3. <input type="radio" name="question1" required />odp1<br>
  4. <input type="radio" name="question1" required />odp2<br>
  5.  
  6. treść pytania drugiego<br>
  7. <input type="radio" name="question2" required />odp3<br>
  8. <input type="radio" name="question2" required />odp4<br>
  9.  
  10. <button type="button" id="next" onClick="nextq(1, 2)" disabled> Dalej </button>
  11. </div>
  12.  
  13. <div id="step2">
  14. treść pytania trzeciego<br>
  15. <input type="radio" name="question3" required />A<br>
  16. <input type="radio" name="question3" required />B<br>
  17.  
  18. treść pytania czwartego<br>
  19. <input type="radio" name="question4" required />X<br>
  20. <input type="radio" name="question4" required />Y<br>
  21.  
  22. <button type="button" id="next" onClick="nextq(2, 3)" disabled> Dalej </button>
  23. </div>

To tak w dużym uproszczeniu, formularz jest dłuższy a kod oczywiście wymaga uzupełnienia (lub napisania na nowo) i dodania jakiś funkcji w JS czy użycia addEventListener'a.
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 11:25