I am building a dynamic form system that will automatically assemble an HTML form and make it interactive by using a single form.js file that will work over all the forms built within the system. I already have the form system complete and for the most part the form.js is done with the small exception of a nested div’s bug.
A Little Background:
I’ll post the form I am testing if it is needed but I think this will be enough to explain my needs.
I am using a form that puts question dependencies in a div so that if the question is answered the dependency will then show. To better understand how this works, the form system allows for infinite nesting of dependencies. If question 1 has a dependency question and that dependency has a dependency and question 2 has a dependency it would look like:
Question 1:
-> Dependency Question 1-1
-> Dependency Question 1-1-1
Question 2
-> Dependency Question 2-1
Each section of dependencies go into their own containing div for styling and organization:
<form>
<!-- Other elements (not div) mainly form input, labels, and fieldsets-->
<div id="dep-1" class="dependency">
<!-- Other elements (not div) mainly form input, labels, and fieldsets-->
<div id="dep-1-2" class="dependency">
<!-- Other elements (not div) mainly form input, labels, and fieldsets-->
<div id="dep-2-1" class="dependency">
<!-- Other elements (not div) mainly form input, labels, and fieldsets-->
</div>
</div>
</div>
</form>
The id’s are just for show, they are automated by the form system.
My Problem:
I have every thing working the way I wanted, or so I thought. The only issue I am having with a master js file to control all forms is the nested divs. On form load, I use jQuery to disable all dependencies to prevent form submission of them. The issue is when I turn them back on. The functionality I want is just for the dependency div I am in to only enable the :input for that div, not within the child div’s. Currently, all children divs :input within the parent div are all enabled. I have tried numerous methods to prevent it from going into the children div’s and spend over 2 hours on Google and SO. Still no luck… So here I am asking for your help!
form.js code used for this
function _toggleDependencyContainer(id, result) {
if (result === true) {
// Allow only input of parent dependency div, not children dependency divs
$('#'+id).find(':input').each(function() { // **THIS LINE IS THE ISSUE!!**
$(this).removeAttr("disabled");
});
$('#'+id).slideDown();
} else {
// Disable all children input through all child divs
$('#'+id).slideUp().find(':input').each(function() {
$(this).attr("disabled", "disabled")
});
}
}
function _toggleElementDependencies(element) {
if (element.type === undefined) {
console.log('element.type is undefined');
return;
}
// Get the dependency ID and result then toggle
switch(element.type.toLowerCase()) {
case 'select':
case 'select-one':
case 'select-multiple':
$("#"+element.id+" option").each(function () {
var id = element.id+'-'+this.value+'-dep';
var result = this.selected;
if (id === undefined || id == null) {
return;
}
_toggleDependencyContainer(id, result);
});
return;
break;
case 'radio':
case 'checkbox':
var id = element.id+'-dep';
var result = $(element).is(':checked');
break;
case 'file':
case 'password':
case 'text':
case 'textarea':
var id = element.id+'-dep';
var result = ( $.trim( $(element).val() ) ) ? true : false;
break;
default:
return;
break;
}
if (id === undefined || id == null) {
return;
}
_toggleDependencyContainer(id, result);
}
$(document).ready(function() {
$('.dependency').hide(); // hide all dependencies
//
// Scan page for forms
// Loop through each form and process the elements to toggle dependencies
$('form').each(function(i) {
// Find all the input elements
$('#'+this.id).find(':input').not(':disabled').each(function(i) {
_toggleElementDependencies(this);
});
});
// Monitor form elements to toggle dependencies
$(':input').blur(function() {
_toggleElementDependencies(this);
});
$(':radio, :checkbox').click(function() {
$('input[name="'+this.name+'"]').each(function(i) {
_toggleElementDependencies(this);
});
});
$('select').change(function() {
_toggleElementDependencies(this);
});
});
I am hoping some jQuery master could give me the snippet I am missing. I tried using .not() selector but I think I am using the wrong identifier for the children div. I have tried:
$('#'+id).not('div>div').find(':input').each(...);
$('#'+id).not('div:first').find(':input').each(...);
$('#'+id).not('div:first-chil').find(':input').each(...);
$('#'+id).not('div').find(':input').each(...);
and many more but I think I am missing something simple..
EDIT
I am adding my form I am using to help with understanding the layout
<form method="post" action="/_projects/newForm/" id="test" name="test">
<fieldset>
<legend>One</legend><label for="first-name">First Name <span class="required-icon">*</span></label>
<input type="text" value="test" class="required" title="First Name" id="first-name" name="first_name">
<div class="dependency" id="first-name-dep" style="display: block;">
<label for="first-name2">First Name 2</label>
<input type="text" title="First Name 2" id="first-name2" name="first_name2">
<div class="dependency" id="first-name2-dep" style="display: none;">
<label for="first-name3">First Name 3</label>
<textarea title="First Name 3" id="first-name3" name="first_name3" disabled="disabled"></textarea>
</div>
</div>
<label for="last-name">Last Name</label>
<input type="text" title="Last Name" id="last-name" name="last_name">
<label for="last-name2">Last Name2</label>
<input type="text" title="Last Name2" id="last-name2" name="last_name2">
<label for="radio-test">Radio Test <span class="required-icon">*</span></label>
<fieldset class="options-cage" id="options-cage-radio-test">
<label for="radio-test-1">
<input type="radio" class="required" title="Yes" value="1" name="radio_test" id="radio-test-1">
Yes
</label>
<label for="radio-test-2">
<input type="radio" class="required" title="No" checked="checked" value="2" name="radio_test" id="radio-test-2">
No
</label>
</fieldset>
<div class="dependency" id="radio-test-1-dep" style="display: block;">
<label for="radio-dep">Radio Dep <span class="required-icon">*</span></label>
<input type="text" class="required" title="Radio Dep" id="radio-dep" name="radio_dep">
<div class="dependency" id="radio-dep-dep" style="display: none;">
<label for="radio-dep2">Radio Dep 2</label>
<input type="text" title="Radio Dep 2" id="radio-dep2" name="radio_dep2" disabled="disabled">
<div class="dependency" id="radio-dep2-dep" style="display: none;">
<label for="radio-dep3">Radio Dep 3 <span class="required-icon">*</span></label>
<fieldset class="options-cage" id="options-cage-radio-dep3">
<label for="radio-dep3-1">
<input type="radio" class="required" title="Yes" value="1" name="radio_dep3" id="radio-dep3-1" disabled="disabled"> Yes</label>
<label for="radio-dep3-2">
<input type="radio" class="required" title="No" checked="checked" value="2" name="radio_dep3" id="radio-dep3-2" disabled="disabled"> No</label>
</fieldset>
<div class="dependency" id="radio-dep3-1-dep" style="display: none;">
<label for="radio-dep4">Radio Dep 4 <span class="required-icon">*</span></label>
<input type="text" class="required" title="Radio Dep 4" id="radio-dep4" name="radio_dep4" disabled="disabled">
<div class="dependency" id="radio-dep4-dep" style="display: none;">
<label for="radio-dep5">Radio Dep 5</label>
<input type="text" title="Radio Dep 5" id="radio-dep5" name="radio_dep5" disabled="disabled">
<div class="dependency" id="radio-dep5-dep" style="display: none;">
<label for="radio-dep6">Radio Dep 6 <span class="required-icon">*</span></label>
<fieldset class="options-cage" id="options-cage-radio-dep6">
<label for="radio-dep6-1">
<input type="checkbox" class="required" title="Yes" value="1" name="radio_dep6" id="radio-dep6-1" disabled="disabled">
Yes
</label>
<label for="radio-dep6-2">
<input type="checkbox" class="required" title="No" checked="checked" value="2" name="radio_dep6" id="radio-dep6-2" disabled="disabled">
No
</label>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Two</legend><label for="last-name3">Last Name3</label>
<input type="text" title="Last Name3" id="last-name3" name="last_name3">
<label for="checkbox-test">Checkbox Test <span class="required-icon">*</span></label>
<fieldset class="options-cage" id="options-cage-checkbox-test">
<label for="checkbox-test-10">
<input type="checkbox" class="required" title="Yup" value="10" name="checkbox_test[]" id="checkbox-test-10"> Yup</label>
<label for="checkbox-test-12">
<input type="checkbox" class="required" title="Nope" checked="checked" value="12" name="checkbox_test[]" id="checkbox-test-12"> Nope</label>
</fieldset>
<label for="select-test">Select Test <span class="required-icon">*</span></label>
<select title="Select Test" id="select-test" name="select_test" class="input-select required">
<option value="">- Please Select</option>
<option value="1">one</option>
<option value="2">two</option>
</select>
</fieldset>
<fieldset>
<input type="hidden" value="test" id="formID" name="formID">
<input type="hidden" value="dd7c7fae86db8988669231b67ce637138aa6c180" id="csrf" name="csrf">
<input type="submit" value="Submit">
<input type="reset" title="Reset the form?" value="Reset">
</fieldset>
</form>
If I understood all that, you’d change this:
to this:
My understanding is that you only want to target child inputs. You sometimes seem to be using the term “children” to refer to all ancestors, when in fact, children implies only the next level of nesting.
To continue the metaphor of ancestry, more deeply nested elements would be grandchildren, great-grandchildren, etc.
The
.find()method looks at all ancestors, while the.children()method only looks at children.Side note: You don’t need to explicitly code the
.each(). You can do this:And the method will be applied to all matches.
As it turns out that the DOM selection is a little more complex because of the
fieldsetcontainers, we can do this:which is equivalent to this:
which I would tend to prefer, though the initial ID selection could be cached.