MktoForms2 :: Field in 2 Fieldsets - Clone Version

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>

CSS

BODY {
    background-color: whitesmoke;
    padding: 20px;
}
.mktoFormRow:not([data-wrapper-for]), .mktoFormRow[data-wrapper-for~="FirstName"] {
    display: none;
}
FIELDSET .mktoFormRow[data-wrapper-for~="FirstName"] {
    display: block;
}
FORM {
    width: 300px !important;
}
FIELDSET {
    padding:20px !important;
}

JavaScript

(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',
        selInterestingFormFields = 'INPUT[name],SELECT[name],TEXTAREA[name]',
        selLegends = 'LEGEND',
        selWrapperRow = '.mktoFormRow',
        selMetadataHolder = '.mktoFieldDescriptor',
        selUntaggedWrappers = selWrapperRow + ':not([' + wrapperTag + '])',
        mktoJQ = MktoForms2.$;
    
    var stat;

    MktoForms2.onFormRender(function (form) {
            console.log(stat);

        var formEl = form.getFormElem()[0],
            selRoamingFieldRows = toWrapperSelector(roamingFieldNames);

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

        forEach(formEl.querySelectorAll(selRoamingFieldRows), function (staticFormRow) {
            forEach(staticFormRow.querySelectorAll(selInterestingFormFields), function (formField) {
                if (!formField.getAttribute('data-original-id')) {
                    formField.setAttribute('data-original-id', formField.getAttribute('id')), formField.removeAttribute('id');
                }
            });            

            var dynamicFormRow = staticFormRow.cloneNode(true);
            forEach(dynamicFormRow.querySelectorAll(selInterestingFormFields), function (formField) {
                formField.setAttribute('id', formField.getAttribute('data-original-id'));
               ...