Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Script and configuration that allows custom fields to be placed below an optional group. If the optional group is checked, then the fields appear. If an optional group is unchecked, then the groups disappear.
<script type="text/javascript">
$(document).ready(function() {
var groupMap = {};
// Click handler for a group checkbox. Hides or or shows the
// associated custom fields.
function groupClickHandler() {
if ($(this).is(':checked')) {
$('.option_box', $(this).parent()).css('display', 'block');
} else {
$('.option_box', $(this).parent()).css('display', 'none');
}
}
// Initialize a group. The associated custom fields are added to the
// group's parent so that they can be hidden and displayed easily.
// @param [Number,String] key groups_KEY of interest
function initializeGroup(key) {
var checkbox = $('input[name="groups_KEY' + key + '_checkbox"]');
checkbox.removeAttr('checked');
if (checkbox.length == 0) {
return;
}
checkbox.parent().append($('#option_template').html());
var optionBox = $('.option_box', checkbox.parent());
groupMap[key].map(function(name) {
var option = $('*[name="' + name + '"]');
if (option.length > 0) {
if (checkbox[0].tagName.toLowerCase() == 'select') {
optionBox.append(option.parent().parent());
} else {
optionBox.append(option.parent());
}
}
})
checkbox.click(groupClickHandler);
}
// Mainline. Parse the groups data and initialize it.
function main() {
var defs = $('#groups-definitions dt');
if (defs.length == 0) return;
defs.each(function() {
var groupsKey = $(this).html();
var names = $(this).next().html();
names = names.split(/,/gm).map(function(x) { return x.trim(); })
groupMap[groupsKey.toString()] = names;
})
Object.keys(groupMap).map(initializeGroup);
}
main();
})
</script>
<!-- Template for the options that need to be appended to the group. -->
<div style="display: none;" id="option_template">
<div style="display: none;" class="option_box">
<div class="formRow option-header">Please tell us more!</div>
</div>
</div>
<!-- Configuration.
The contents of this <dl> tag define the groups key(s) to modify and the list of
custom field API names that will be mov ed under each group. Please read this
if you like to know about the <dl> tag: http://www.w3schools.com/tags/tag_dl.asp.
-->
<dl id="groups-definitions" style="display: none;">
<dt>93072</dt>
<dd>cheddar, danisfarmcheese, gouda, longhorn</dd>
<dt>123567</dt>
<dd>able, bravo, charlie, delta, eagle</dd>
</dl>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.