0

私のウェブサイトで、ある種のマルチステップフォームを作成しています。各質問には 2 つの可能な回答がありました (ラジオ ボタン) 各質問はブートストラップ アコーディオン要素です。(この時点で表示されるのは 1 つだけです)

ページが読み込まれると、最初のブートストラップ アコーディオン要素が最初の質問とともに開かれ、各アコーディオン要素には次のボタンがあり、次のアコーディオン要素に移動します。次に開くアクションは data-toggle="collapse" data-target="#target" です

次の質問に進む前に、回答が得られたかどうかを検証したいと思います。

私を助けてください！これに何日も立ち往生していて、探している答えが見つかりません。

以下は私のマルチステップフォームのコードです

<form>
<div class="testTitel 1 active">Gemak</div>
<div id="demo" class="collapse in">

<input type="radio" name="group1" value="1" class="radioStyle"> Ik wil af van de administratie die hoort bij werkgeven. <br>
<input type="radio" name="group1" value="2" class="radioStyle"> De administratie rondom mijn personeelszaken kan ik prima zelf. <br>

<button type="button" class="btn nextbtn 1" data-toggle="collapse" data-target="#demo,#demo2">
  Volgende
</button>
</div>
<div class="testTitel 2">Flexibiliteit</div>
<div id="demo2" class="collapse">

<input type="radio" name="group2" value="1" class="radioStyle"> Ik zoek meer flexibiliteit om mijn personeel in te kunnen zetten. <br>
<input type="radio" name="group2" value="2" class="radioStyle"> De contractsoorten die ik zelf aan kan bieden, geven mij voldoende speelruimte. <br>

<button type="button" class="btn backbtn 2" data-toggle="collapse" data-target="#demo,#demo2">
  Terug
</button>
<button type="button" class="btn nextbtn 2" data-toggle="collapse" data-target="#demo2,#demo3">
  Volgende
</button>
</div>
<div class="testTitel 3">Risico</div>
<div id="demo3" class="collapse">

<input type="radio" name="group3" value="2" class="radioStyle"> Een medewerker die ziek wordt zal in de toekomst geen negatief effect hebben op mijn bedrijf. <br>
<input type="radio" name="group3" value="1" class="radioStyle"> Ik heb geen idee wat een zieke medewerker zou kunnen kosten.. <br>

<button type="button" class="btn backbtn 3" data-toggle="collapse" data-target="#demo2,#demo3">
  Terug
</button>
<button type="button" class="btn nextbtn 3" data-toggle="collapse" data-target="#demo3,#demo4">
  Volgende
</button>
</div>
<div class="testTitel 4">Wetgeving</div>
<div id="demo4" class="collapse">

<input type="radio" name="group4" value="2" class="radioStyle"> Ik ben helemaal op de hoogte van alle verandering in het arbeidsrecht en weet zeker dat ik dit goed geregeld heb. <br>
<input type="radio" name="group4" value="1" class="radioStyle"> Alle veranderingen zijn lastig bij te houden en door te voeren in mijn personeelsbeleid. <br>

<button type="button" class="btn backbtn 4" data-toggle="collapse" data-target="#demo3,#demo4">
  Terug
</button>
<button type="button" class="btn nextbtn 4" data-toggle="collapse" data-target="#demo4,#demo5">
  Volgende
</button>
</div>
<div class="testTitel 5">Personeelskosten</div>
<div id="demo5" class="collapse">

<input type="radio" name="group5" value="1" class="radioStyle"> Ik wil meer inzicht in mijn totale personeelskosten. <br>
<input type="radio" name="group5" value="2" class="radioStyle"> Ik weet precies wat mijn personeelskosten zijn en kom nooit voor verrassingen te staan. <br>

<button type="button" class="btn donebtn 5" data-toggle="collapse" data-target="#demo5">
  Bekijk advies
</button>
</div>
</form>
4

1 に答える 1