Formularz, jak osiągnąć coś takiego?

Question

Witam serdecznie, 

potrzebuję zrobić formularz, który będzie składał się z pięciu pytań. Jak osiągnąć coś takiego jak niżej.

Chodzi głownie o przyciski wyboru, oraz jak zrobić aby po kliknięciu dalej nie przeładowywała się cała strona, tylko pojawiało się następne pytanie

Comments

Chcesz to zrobić w czystym HTMLu i CSS? Czy może znasz JavaScript? Formularz będziesz wysyłał do serwera np PHP? Opisz z jakich technologi chcesz skorzystać :)

---

Jeśli chodzi ostylowanie to wystarczy css, jednak ja potrzebuję zrobic taką ankietę w której klient odpowada na 5 pytań i w zależności od udzielonych odpowiedzi wyskoczy mu konkretny produkt. Dodam, że ma to działać na prestashop, więc bez js sie nie obejdzie.

---

Dużo da się zrobić w oparciu o CSSa ;) np przycisk dalej mógłby być linkiem do kotwicy <a href="#step2" /> a potem w CSS możesz pokazywać i ukrywać dany ID poprzez selektor #step2:target Dlatego też chciałem wiedzieć jak chcesz to wykonać :) 

Answer 1

Najpierw musisz wykryć wciśnięcie przycisku dalej i zaprzestać parsowania formularza (ja zrobię to w jQuery):

<form class="form">
     <!-- zawartość formularza -->
</form>

Skrypt JS:

$(document).ready(function() {
     $('.form').submit(function(e) {
          e.preventDefault();
          e.stopPropagation();
     });
});

Tym osiągniesz to, że po kliknięciu "dalej" formularz nie będzie się przesyłał.

Co do obsługi backendu i sprawdzania pytań poczytaj:

https://api.jquery.com/jquery.ajax/

https://api.jquery.com/load/

Trzymam kciuki za Twój projekt :D

Answer 2

W skrócie, to w onclick trzeba podmienić styl przycisku, tak aby zmienił wygląd. Trzeba zapamiętać gdzeiś który był przycisk zaznaczony i w 'dalej' przeslać tę zapamiętaną informację do następnych kroków. JavaScript chyba będzie niezbędna.

Comments

Nie powinno się używać onclick :/

---

Ponieważ....

---

Ponieważ nie zawsze działa, a ponadto jest to mieszanie JSa z HTMLem i jest to po prostu nieestetyczne. Poza tym możemy podpiąć tylko 1 zdarzenie do elementu i mamy o wiele lepsze metody np addEventListener i jQuery.

---

Ja nie mówiłem żeby nie używać onclick z jQuery :) onclick nie wyklucza podpięcia obslugi innych zdarzeń.