jQueryformBuilder如何在XML中显示表单数据？

Question

我正在使用 jQuery formBuilder 插件。我已阅读文档，但似乎 getData 操作只能提醒 XML 中的表单数据。我的问题是，如何在 div 中显示它？

https://codepen.io/kevinchappell/pen/zwrddy

var fbTemplate = document.getElementById('form-wrap');
var formBuilder = jQuery(fbTemplate).formBuilder(options);

document.getElementById('getXML').addEventListener('click', function() {
// alert(formBuilder.actions.getData('xml'));
previewData = formBuilder.formData;
let html = '<!doctype html><title>Form Preview</title><body class="container"><h1>Preview</h1><hr>'+previewData+'</body></html>';
var formPreviewWindow = window.open('', 'formPreview', 'height=480,width=640,toolbar=no,scrollbars=yes');
formPreviewWindow.document.write(html);

});

Answer 1

您可以使用以下代码添加数据：

演示：https://codepen.io/creativedev/pen/rKwOzb

jQuery(function($) {
    var fbEditor = document.getElementById('build-wrap');
    var formBuilder = $(fbEditor).formBuilder();
    document.getElementById('getXML').addEventListener('click', function() {
      alert(formBuilder.actions.getData('xml'));
        htmldata = formBuilder.actions.getData('xml');
        previewData = formBuilder.formData;
        let html = '<!doctype html><title>Form Preview</title><body class="container"><h1>Preview</h1><hr><pre>' + htmldata + '</pre></body></html>';
        console.log(htmldata)
        var formPreviewWindow = window.open('', 'formPreview', 'height=480,width=640,toolbar=no,scrollbars=yes');
        formPreviewWindow.document.write(html);
    });
    document.getElementById('getJSON').addEventListener('click', function() {
        alert(formBuilder.actions.getData('json'));
    });
    document.getElementById('getJS').addEventListener('click', function() {
        alert('check console');
        console.log(formBuilder.actions.getData());


    });

});

jQueryformBuilder如何在XML中显示表单数据？

jQuery formBuilder how to display form data in XML?

xml

jquery

formbuilder