• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

VPS Starter Arubacloud
+1 głos
241 wizyt
pytanie zadane 11 listopada 2019 w HTML i CSS przez Destiny Użytkownik (500 p.)

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

komentarz 11 listopada 2019 przez rafal.budzis Szeryf (85,340 p.)
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ć :)
komentarz 11 listopada 2019 przez Destiny Użytkownik (500 p.)
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.
komentarz 11 listopada 2019 przez rafal.budzis Szeryf (85,340 p.)

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ć :) 

2 odpowiedzi

0 głosów
odpowiedź 11 listopada 2019 przez kingkushlee Gaduła (3,960 p.)

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

0 głosów
odpowiedź 11 listopada 2019 przez mmarszik Mądrala (7,390 p.)
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.
komentarz 11 listopada 2019 przez kingkushlee Gaduła (3,960 p.)
Nie powinno się używać onclick :/
komentarz 11 listopada 2019 przez mmarszik Mądrala (7,390 p.)
Ponieważ....
komentarz 11 listopada 2019 przez kingkushlee Gaduła (3,960 p.)
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.
komentarz 11 listopada 2019 przez mmarszik Mądrala (7,390 p.)
Ja nie mówiłem żeby nie używać onclick z jQuery :) onclick nie wyklucza podpięcia obslugi innych zdarzeń.

Podobne pytania

0 głosów
1 odpowiedź 235 wizyt
pytanie zadane 14 listopada 2018 w Offtop przez skywalkerbart Nowicjusz (240 p.)
0 głosów
1 odpowiedź 210 wizyt
pytanie zadane 28 lipca 2018 w HTML i CSS przez Hipolit Roszkowski Obywatel (1,480 p.)
0 głosów
2 odpowiedzi 282 wizyt
pytanie zadane 2 sierpnia 2016 w HTML i CSS przez uMAXa Gaduła (4,290 p.)

92,832 zapytań

141,777 odpowiedzi

320,822 komentarzy

62,162 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...