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

Zaawansowany formularz

Object Storage Arubacloud
0 głosów
90 wizyt
pytanie zadane 30 sierpnia 2020 w JavaScript przez nowa Początkujący (450 p.)

Hej,

tworzę formularz w WordPressie (bez pluginów, bo nie chcę to zrobić za darmo a żaden darmowy plugin z tego co wiem nie oferuje takich funkcjonalności), który musi działać bez przeładowywania strony.

Problemem dla mnie jest stworzenie pierwszego etapu formularza. Polega on na tym, że użytkownik wybiera jeden lub parę kategorii, które kryją się pod zdjęciem i w zależności od wyboru właśnie pokazują się mu po kolei formularze z kategorii, które wybrał. Nie wiem, w jaki sposób zebrać te dane i po kolei odpalać kolejne formularze w zależności od wyboru.

Gdy pytania w formularzu będą się powielały powinno nastąpić automatyczne wypełnienie tego przez system formularza, ale to już rozmowa na inny temat trochę :D 

Ps. Dane w formularzu są bardziej wstawione poglądowo więc normalnie pytania nie powtarzają się co krok.

Jakieś pomysły? 

<script>
 function choosenOptions(){
    if click 
 }
 
 
 function endPhase() {
 
 }

</script>

<form id="multiphase" onsubmit="return false">

<div id="phase1">

<div class="checkbox-wrapper">
<input type="checkbox" name="option1" id="option1"/>
<img src="img/blah1.png"/>
</div>

<div class="checkbox-wrapper">
<input type="checkbox" name="option2" id="option2"/>
<img src="img/blah2.png"/>
</div>

<div class="checkbox-wrapper">
<input type="checkbox" name="option3" id="option3"/>
<img src="img/blah3.png"/>
</div>

<div class="checkbox-wrapper">
<input type="checkbox" name="option4" id="option4"/>
<img src="img/blah4.png"/>
</div>

<div class="checkbox-wrapper">
<input type="checkbox" name="option5" id="option5"/>
<img src="img/blah5.png"/>
</div>
<button onclick="processPhase1()">Next</button>

</div>


<div id="phase2">

<label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">

</div>
<button onclick="processPhase2()">Next</button>

</div>


<div id="phase3">

<label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
<button onclick="processPhase3()">Next</button>
</div>




<div id="phase4">

<label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
<button onclick="processPhase4()">Next</button>
</div>



<div id="phase5">

<label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
<button onclick="processPhase5()">Next</button>
</div>


<div id="endPhase">

<label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
<button onclick="endPhase()">Submit</button>
</div>

</form>

 

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
0 odpowiedzi 1,282 wizyt
pytanie zadane 11 września 2016 w JavaScript przez skrzatjedyny Gaduła (3,150 p.)
0 głosów
1 odpowiedź 92 wizyt
pytanie zadane 21 stycznia 2020 w PHP przez marta.zawisla Początkujący (260 p.)
0 głosów
2 odpowiedzi 256 wizyt
pytanie zadane 30 marca 2017 w Nasze projekty przez Codeboy Stary wyjadacz (12,120 p.)

92,579 zapytań

141,432 odpowiedzi

319,663 komentarzy

61,964 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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...