MktoForms2 :: Field in 2 Fieldsets

by sanford

HTML

<script src="//app-sj01.marketo.com/js/forms2/js/forms2.min.js"></script>
<script src="data:text/javascript;base64,TWt0b0Zvcm1zMi53aGVuUmVhZHkoZnVuY3Rpb24oZm9ybSl7DQogICAgICAgIGZvcm0ub25TdWJt
aXQoZnVuY3Rpb24oZm9ybSl7DQogICAgICAgICAgICBmb3JtLnN1Ym1pdHRhYmxlKGZhbHNlKTsN
CmNvbnNvbGUubG9nKCdWYWx1ZXM6Jyxmb3JtLmdldFZhbHVlcygpKTsNCmRvY3VtZW50LmxvY2F0
aW9uLnJlbG9hZCgpOw0KDQogICAgICAgIH0pOw0KfSk7DQo="></script>
<form id="mktoForm_395"></form>
<script>
    MktoForms2.loadForm("//app-sj01.marketo.com", "410-XOR-673", 395);
</script>
<script>
    (function () {

    /* / user config section \ */
    var dynamicFieldsetNames = ['Fieldset A', 'Fieldset B'], // fieldsets that have fields in common
        roamingFieldNames = ['FirstName']; // fields that roam between the 'sets
    /* \ user config section / */

    var wrapperTag = 'data-wrapper-for',
        interestingFormFieldsSelector = 'INPUT[name],SELECT[name],TEXTAREA[name]',
        legendsSelector = 'LEGEND',
        wrapperRowSelector = '.mktoFormRow',
        metadataContainerSelector = '.mktoFieldDescriptor',
        untaggedWrappersSelector = wrapperRowSelector + ':not([' + wrapperTag + '])';

    var roamingFieldRowsSelector = toWrapperSelector(roamingFieldNames),
        roamingFieldRows = [];

    MktoForms2.onFormRender(function (form) {

        var formEl = form.getFormElem()[0];

        // tag each field row with the names of its inputs to make it easily seekable
        forEach(formEl.querySelectorAll(untaggedWrappersSelector), function (formRow) {
            forEach(formRow.querySelectorAll(interestingFormFieldsSelector), function (wrappedField) {
                formRow.setAttribute(wrapperTag, toClassName(
                formRow.getAttribute(wrapperTag), wrappedField.name));
            });
        });

        // intern references to the roaming field wrappers and their associated metadata
        if (!roamingFieldRows.length) {
            forEach(formEl.querySelectorAll(roamingFieldRowsSelector),...

CSS

.mktoForm:not([data-initialized]) {
    /* pre-init form */
    display: none;
}
.mktoFormRow[data-roaming-field] {
    /* roaming field not currently in a fieldset */
    display: none;
}
FIELDSET .mktoFormRow[data-roaming-field] {  
    /* roaming field inside fieldset */
    display: block;
}

/* just cosmetics */
BODY {
    background-color: whitesmoke;
    padding: 20px;
}
FORM {
    width: 300px !important;
}