added support for conditonal fieldsets
This commit is contained in:
parent
fc5b0d2bd6
commit
81cf563d38
@ -7,5 +7,4 @@ $case formLayout
|
||||
$if not (Blaze.null $ fvLabel view)
|
||||
<label .form-group__label for=#{fvId view}>#{fvLabel view}
|
||||
<div .form-group__input>
|
||||
$# FIXME: file-input does not have `required` attribute, although set on form-group
|
||||
^{fvInput view}
|
||||
|
||||
@ -28,17 +28,52 @@
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.utils.interactiveFieldset = function(form, fieldSets) {
|
||||
|
||||
var fields = fieldSets.map(function(fs) {
|
||||
return {
|
||||
fieldSet: fs,
|
||||
condId: fs.dataset.conditionalId,
|
||||
condValue: fs.dataset.conditionalValue,
|
||||
condEl: form.querySelector('#' + fs.dataset.conditionalId),
|
||||
};
|
||||
}).filter(function(field) {
|
||||
return !!field.condEl;
|
||||
});
|
||||
|
||||
function updateFields() {
|
||||
fields.forEach(function(field) {
|
||||
field.fieldSet.classList.toggle('hidden', field.condEl.value !== field.condValue);
|
||||
});
|
||||
}
|
||||
|
||||
function addEventListeners() {
|
||||
fields.forEach(function(field) {
|
||||
field.condEl.addEventListener('input', updateFields)
|
||||
});
|
||||
}
|
||||
|
||||
if (fieldSets.length) {
|
||||
addEventListeners();
|
||||
updateFields();
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
// auto reactiveButton submit-buttons with required fields
|
||||
var forms = document.querySelectorAll('form');
|
||||
Array.from(forms).forEach(function(form) {
|
||||
// auto reactiveButton submit-buttons with required fields
|
||||
var submitBtn = form.querySelector('[type=submit]');
|
||||
if (submitBtn) {
|
||||
window.utils.reactiveButton(form, submitBtn, validateForm);
|
||||
}
|
||||
|
||||
// auto conditonal fieldsets
|
||||
var fieldSets = Array.from(form.querySelectorAll('fieldset[data-conditional-id][data-conditional-value]'));
|
||||
window.utils.interactiveFieldset(form, fieldSets);
|
||||
});
|
||||
|
||||
function validateForm(inputs) {
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user