MktoForms2 :: Temporary Client Fields

by sanford

HTML

<script src="//app-sj01.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_169"></form>
<script>MktoForms2.loadForm("//app-sj01.marketo.com", "410-XOR-673", 169,
function(form) 
    {
    
    var formEl = form.getFormElem()[0];

    // configuration section: list the temp fields to add and the permanent field to write all their values out to
    var tempFields = {
       question1 : 'Favorite car:',
       question2 : 'Favorite movie:',
       question3 : 'Favorite animal:'
    }, 
    tempInputs = [],
    concatIntoField = 'FirstName';
    
    //  utility fn: tag all the outer wrappers with their inner inputs ids to make them easy to find
    for ( var formRows = formEl.querySelectorAll('.mktoFormRow'), i = 0, imax = formRows.length, wrappedInput; i < imax; i++ ) 
    {    
        if ( (wrappedInput = formRows[i].querySelector('INPUT')) && wrappedInput.name) {
            formRows[i].setAttribute('data-wrapper-for', wrappedInput.name);
        }
    }
    
    // interesting elements    
    var concatIntoRow = formEl.querySelector('.mktoFormRow[data-wrapper-for="'+concatIntoField+'"]'),
    concatIntoInput = formEl.querySelector('#'+concatIntoField),
    beforeEl = concatIntoRow;
    
    // insert each temporary field as a clone of the perm field
    for ( var tempField in tempFields ) { 
        if (!tempFields.hasOwnProperty(tempField)) continue;
     
        var tempRow = concatIntoRow.cloneNode(true),
            tempDescriptor = tempRow.querySelector('DIV.mktoFieldDescriptor'),
            tempLabel = tempRow.querySelector('LABEL[for="'+concatIntoField+'"]'),
            tempInput = tempRow.querySelector('INPUT#'+concatIntoField);
        
        // reset all the key fields on the clone
        tempRow.setAttribute('data-wrapper-for',tempField);
        tempDescriptor.className = tempDescriptor.className.replace('mktoFieldDescriptor','');
        tempInput.id = tempInput.name = tempLabel.htmlFor = tempField;
       ...