In my demo form, fieldsets are enabled sequentially on button selection. So checking a button in first fieldset enables the second, and so on.
If all checkboxes are unchecked in the first fieldset, the form should reset and then second to fourth fieldset should be disabled again. But this is not what happens. Second fieldset somehow remains enabled. What is the problem here?
document.addEventListener("DOMContentLoaded", _ => {
const form = document.forms[0]
// First, disable all fieldsets except the first
function disableFieldsets() {
const disabledFieldsets = form.querySelectorAll(
"section:not(:first-of-type) fieldset"
)
for (let i = 0; i < disabledFieldsets.length; i++) {
disabledFieldsets[i].disabled = true
}
}
disableFieldsets()
// Sequentially enable fieldsets on selection
const sections = form.querySelectorAll("section")
sections.forEach(section => {
section.addEventListener("change", function() {
let nextFieldset = this.nextElementSibling.querySelector("fieldset")
if (nextFieldset) {
nextFieldset.disabled = false
}
})
})
// Reset form and disable fieldsets after all inputs in the first fieldset are deselected
const firstFieldsetButtons = form.querySelectorAll("[name=First]")
let isChecked = false
firstFieldsetButtons.forEach(firstFieldsetButton => {
firstFieldsetButton.addEventListener("click", function(e) {
if (this.checked) {
isChecked = true
} else {
form.reset()
disableFieldsets()
}
})
})
})
<form method=post action=submit>
<section>
<fieldset>
<legend>First Fieldset</legend>
<label><input type=checkbox name=First value=A>A</label>
<label><input type=checkbox name=First value=B>B</label>
<label><input type=checkbox name=First value=C>C</label>
</fieldset>
</section>
<section>
<fieldset>
<legend>Second Fieldset</legend>
<label><input type=radio name=Second value=1.1>1.1</label>
<label><input type=radio name=Second value=1.2>1.2</label>
<label><input type=radio name=Second value=1.3>1.3</label>
</fieldset>
</section>
<section>
<fieldset>
<legend>Third Fieldset</legend>
<label><input type=radio name=Third value=2.1>2.1</label>
<label><input type=radio name=Third value=2.2>2.2</label>
<label><input type=radio name=Third value=2.3>2.3</label>
</fieldset>
</section>
<section>
<fieldset>
<legend>Fourth Fieldset</legend>
<label><input type=radio name=Fourth value=3.1>3.1</label>
<label><input type=radio name=Fourth value=3.2>3.2</label>
<label><input type=radio name=Fourth value=3.3>3.3</label>
</fieldset>
</section>
<input type=submit value=Submit>
</form>
Aucun commentaire:
Enregistrer un commentaire