filtrowany formularz html5

pytanie zadane 28 kwietnia 2016 w JavaScript przez sekut1626 Obywatel (1,210 p.)

Witam, chce stworzyć prosty formularz, z filtrowanymi wyborami w radio. Dokładnie ma wyglądać to tak:

mam cztery pytania i w każdym pytaniu mam kilka wariantów wyboru typu radio. chcę aby przy wyborze w pierwszym pytaniu jednej opcji radio w drugim pytaniu pojawiły się opcje wybrane dla wyboru z pierwszego pytania, a w przypadku wybrania innej opcji w pierwszym pytaniu innej opcje w drugim pytaniu niż w przypadku pierwszym itd dla kolejnych opcji i pytań.

Czy znajdę gdzieś jakiś kod do tego rozwiązania ? Jak mogę to w prosty sposób uzyskać ?

Oto mój formularz:

<!doctype html>
<html>
     <head>
          <meta charset="UTF-8" />
		  <link rel="stylesheet" href="style.css" />
          <title>filtrowany formularz</title>
     </head>
     <body>
          <header>
               mój formularz
          </header>
         
          <section>
		  
			<form>
				<h1>rodzja obiektu</h1>
					<label id="op1">
					<input type = "radio" name = "radzOb" value ="hotel" />
					hotel</label>
          
					<label id="op2">
					<input type = "radio" name = "radzOb" value = "restaracja" />
					restauracja</label>
 
					<label id="op3">
					<input type = "radio" name = "radzOb" value = "biura" />
					biura</label>
					
					<label id="op4">
					<input type = "radio" name = "radzOb" value = "obiekty publiczne" />
					obiekty publiczne(bank, poczta, itp)</label>
					</br>
					</br>
					</br>
					
				<h1>powierzchnia</h1>	
					<label id = "op5">
					<input type = "radio" name = "pow" value="do 500m2"/>
					do 500m2</label>
					
					<label id = "op6">
					<input  type = "radio" name = "pow" value="do 2000m2"/>
					do 2000m2</label>
					
					<label id = "op7">
					<input type = "radio" name = "pow" value="powyżej 2000m2"/>
					powyżej 2000m2</label>
					</br>
					</br>
					</br>				
				
				<h1>typy pomieszczeń</h1>
					<label id="op8">
					<input  type = "radio" name = "typyPom" value="mieszkalne"/>
					mieszkalne</label>
          
					<label id="op9">
					<input type = "radio" name = "typyPom" value="pomocnicze"/>
					pomocnicze</label>
					
 
					<label id="op10">
					<input type = "radio" name = "typyPom" value="techniczne"/>
					techniczne</label>	
					
					<label id="op11">
					<input  type = "radio" name = "typyPom" value="sanitarne"/>
					sanitarne</label>
					
					<label id="op12">
					<input type = "radio" name = "typyPom" value="gospodarcze"/>
					gospodarcze</label>
					
					<label id="op13">
					<input type = "radio" name = "typyPom" value="garaże"/>
					garaże</label>	
					</br>
					</br>
					</br>					
					
				<h1>usługi dodatkowe</h1>
					<label id="op14">
					<input  type = "radio" name = "usłuDod" value="wyklejanie"/>
					wyklejanie</label>
					
					<label id="op15">
					<input type = "radio" name = "usłuDod" value="wycinanie"/>
					wycinanie</label>
					
					<label id="op16">
					<input type = "radio" name = "usłuDod" value="malowanie"/>
					malowanie</label>	
					
					<label id="op17">
					<input  type = "radio" name = "usłuDod" value="sanitarne"/>
					sanitarne</label>
          
					<label id="op18">
					<input type = "radio" name = "usłuDod" value="cięcie"/>
					cięcie</label>	
			</form>	
          </section>
       
          <footer>
               
          </footer>
     </body>
</html>
 

i css:

header{
	text-align: center;
}
section{
	width: 900px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	
}
h1{
	font-size: 20px;
}

footer{
	margin-top: 60px;
	text-align:center;	
}

2 odpowiedzi

odpowiedź 28 kwietnia 2016 przez Comandeer Guru (601,590 p.)
wybrane 28 kwietnia 2016 przez sekut1626

Najlepsza

Naskrobałem kiedyś prosty skrypt do tego ;) https://github.com/Comandeer/UF

komentarz 28 kwietnia 2016 przez sekut1626 Obywatel (1,210 p.)

dzięki !

skorzystam z niego :)

odpowiedź 28 kwietnia 2016 przez PawełN Mądrala (5,340 p.)
edycja 28 kwietnia 2016 przez PawełN

Potrzebujesz do tego JavaScript. W cssie domyślnie chowasz te pytania przy użyciu display: none; a w JS ustawiasz event listener na zmianę radio i w zależności co zostało wybrane pokazujesz jedno pytanie a drugie chowasz. Najlepiej to zrobić manipulując parametrem display tych obiektów (pytań i odpowiedzi) poprzez JS. Jeszcze podpowiem, że całkiem sensowne będzie użycie znacznika <fieldset> w htmlu.

komentarz 28 kwietnia 2016 przez Comandeer Guru (601,590 p.)

Najlepiej to zrobić manipulując parametrem display tych obiektów (pytań i odpowiedzi) poprzez JS

No właśnie nie! Lepiej nie tykać stylów bezpośrednio, ale modyfikować stan elementu - czyli w przypadku HTML: jego atrybut [class].

komentarz 28 kwietnia 2016 przez PawełN Mądrala (5,340 p.)

Faktycznie, nie najlepiej, mój błąd, acz najprościej. Warto jeszcze wiedzieć, że bezpośrednia modyfikacja stylów jest wolniejsza od podmiany klas. Przy samodzielnych prototypach jeszcze ujdzie ta prosta metoda ale w produkcji zawsze warto trzymać się dobrych praktyk.