JSFiddle - React, Tailwind, and code Playground

by tonytlwu

HTML

<select id="formSelector">
    <option value="">Select a form to attach</option>
    <option value="pvForm1">Form 1</option>
    <option value="pvForm2">Form 2</option>
    <option value="pvForm3">Form 3</option>
</select>

JavaScript

var pvForm1 = new PV( document.body.dataset.applicationId+'_12345_21336,nested_widget.sc_123123123', {} );
var pvForm2 = new PV( document.body.dataset.applicationId+'_12346_21316,nested_widget.sc_123123143', {} );
var pvForm3 = new PV( document.body.dataset.applicationId+'_12347_21356,nested_widget.sc_123123153', {} );

form.addEventListener( 'beforeSubmit', function(e){
    var val = $('#formSelector').val(); // e.g. "pvForm1"
    if ( val === '' ) return;
    try {
        var pvObj = eval(val);
        var form = e.detail.form;
        var formData = form.formData;
        if(typeof formData['prepended_forms'] === 'undefined' ) {
            formData['prepended_forms'] = {};
        }
        formData['prepended_forms'][nestingPath] = pvObj.data.formData;
    } catch (err) {
        throw("Unable to append custom forms.");
    }
}, false );