JSFiddle - React, Tailwind, and code Playground
HTML
<form name="formPurchase" action="" method="POST">
<input type="radio" name="purchaseType" value="kaas" onclick="showForm('kaas');">optie1
<br>
<input type="radio" name="purchaseType" value="ham" onclick="showForm('ham')">optie2
<br>
<input type="radio" name="purchaseType" value="pindakaas" onclick="showForm('pindakaas')">optie3
<br>
<br>
</form>
<form id='kaas' style="display: none;" name="formKaas" class="formKaas" action=" <?php $_SERVER['PHP_SELF'] ?>" method="POST">
Kaas opties
<input type="radio" name="orderKaas" value="optie11">
<br>
<input type="radio" name="orderKaas" value="optie12">
<br>
<input type="Submit" Name="continuOrder" Value="Continu">
</form>
<form id='ham' style="display: none;" name="formHam" class="formHam" action=" <?php $_SERVER['PHP_SELF'] ?>" method="POST">
Ham opties
<input type="radio" name="orderHam" value="optie11">
<br>
<input type="radio" name="orderHam" value="optie12">
<br>
<input type="Submit" Name="continuOrder" Value="Continu">
</form>
<form id='pindakaas' style="display: none;" name="formPindakaas" class="formPindakaas" action=" <?php $_SERVER['PHP_SELF'] ?>" method="POST">
Pindakaas optie
<input type="radio" name="orderPindakaas" value="optie11">
<br>
<input type="radio" name="orderPindakaas" value="optie12">
<br>
<input type="Submit" Name="continuOrder" Value="Continu">
</form>
JavaScript
function showForm(formId)
{
// Array aanmaken
var options = new Array('kaas', 'ham', 'pindakaas');
// Alles verbergen
for (i = 0, max = options.length; i < max; i++) {
document.getElementById(options[i]).style.display = 'none';
}
// Selectie verwijderen
clearSelection(formId);
// De meegegeven waarde tonen
document.getElementById(formId).style.display = 'block';
}
function clearSelection(formId)
{
for(i = 0, max = document.forms[formId].elements.length; i < max; i++) {
var element = document.forms[formId].elements[i];
if ('radio' === element.type) {
element.checked = false;
}
}
}