Drukowana wersja tematu

Napisany przez: pavon 11.09.2017, 13:37:44

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

[HTML] pobierz, plaintext 
<http://december.com/html/4/element/div.html id="step1">
    treść pytania pierwszego<http://december.com/html/4/element/br.html>
    <http://december.com/html/4/element/input.html type="radio" name="question1" required />odp1<http://december.com/html/4/element/br.html>
    <http://december.com/html/4/element/input.html type="radio" name="question1" required />odp2<http://december.com/html/4/element/br.html>
 
    treść pytania drugiego<http://december.com/html/4/element/br.html>
    <http://december.com/html/4/element/input.html type="radio" name="question2" required />odp3<http://december.com/html/4/element/br.html>
    <http://december.com/html/4/element/input.html type="radio" name="question2" required />odp4<http://december.com/html/4/element/br.html>
 
    <http://december.com/html/4/element/button.html type="button" id="next" onClick="nextq(1, 2)" disabled> Dalej </http://december.com/html/4/element/button.html>
</http://december.com/html/4/element/div.html>
 
<http://december.com/html/4/element/div.html id="step2">
    treść pytania trzeciego<http://december.com/html/4/element/br.html>
    <http://december.com/html/4/element/input.html type="radio" name="question3" required />A<http://december.com/html/4/element/br.html>
    <http://december.com/html/4/element/input.html type="radio" name="question3" required />B<http://december.com/html/4/element/br.html>
 
    treść pytania czwartego<http://december.com/html/4/element/br.html>
    <http://december.com/html/4/element/input.html type="radio" name="question4" required />X<http://december.com/html/4/element/br.html>
    <http://december.com/html/4/element/input.html type="radio" name="question4" required />Y<http://december.com/html/4/element/br.html>
 
    <http://december.com/html/4/element/button.html type="button" id="next" onClick="nextq(2, 3)" disabled> Dalej </http://december.com/html/4/element/button.html>
</http://december.com/html/4/element/div.html>
[HTML] pobierz, plaintext 

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.