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>