同一页面多class初始化jQuery Form Builder时如何获取对应表单数据

我通过class名称初始化了多个formBuilder表单构建器实例（甚至可能是PHP循环生成的大量实例），代码如下：

<html>
<head>
    <title>Example formBuilder</title>
</head>
<body>

<div class="build-wrap"></div>
<div class="build-wrap"></div>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script src="https://formbuilder.online/assets/js/form-builder.min.js"></script>
  <script>
  jQuery(function($) {
    $(document.getElementsByClassName('build-wrap')).formBuilder();
  });
  </script>
</body>
</html>

我知道通过ID初始化时，可以直接保存实例引用来获取数据：

var fbEditor = document.getElementById('build-wrap');
var formBuilder = $(fbEditor).formBuilder();

document.getElementById('getJSON').addEventListener('click', function() {
    alert(formBuilder.actions.getData('json'));
});

但现在用class批量初始化后，点击保存按钮时，如何获取对应表单构建器的实例数据？

核心思路是逐个初始化实例并保存引用，让每个表单容器和对应的构建器实例一一绑定，这样就能在点击保存时精准获取对应数据。

方案1：每个表单配独立保存按钮 #

修改代码，给每个表单容器搭配独立的保存按钮，初始化时把实例存储到DOM元素的data属性中：

<html>
<head>
    <title>Example formBuilder</title>
</head>
<body>
    <!-- 用容器包裹表单构建器和对应保存按钮 -->
    <div class="form-group">
        <div class="build-wrap"></div>
        <button class="save-form-btn">保存当前表单</button>
    </div>
    <div class="form-group">
        <div class="build-wrap"></div>
        <button class="save-form-btn">保存当前表单</button>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="https://formbuilder.online/assets/js/form-builder.min.js"></script>
    <script>
    jQuery(function($) {
        // 遍历每个build-wrap，逐个初始化并保存实例
        $('.build-wrap').each(function() {
            var $container = $(this);
            // 初始化formBuilder，获取实例对象
            var fbInstance = $container.formBuilder()[0];
            // 将实例存储到容器的data属性中
            $container.data('form-builder', fbInstance);
        });

        // 绑定保存按钮点击事件
        $('.save-form-btn').on('click', function() {
            // 找到当前按钮对应的表单构建器容器
            var $targetContainer = $(this).closest('.form-group').find('.build-wrap');
            // 取出存储的实例
            var fbInstance = $targetContainer.data('form-builder');
            // 获取表单数据（json格式，也可以传'xml'等其他格式）
            var formData = fbInstance.actions.getData('json');
            
            // 这里可以根据需求处理数据，比如弹窗展示或提交到后端
            alert(formData);
            // 示例：AJAX提交到后端
            // $.post('/your-save-url', {form_data: formData}, function(res) {
            //     // 处理后端响应
            // });
        });
    });
    </script>
</body>
</html>

方案2：统一按钮保存所有表单数据 #

如果需要一次性保存所有表单的数据，可以遍历所有容器，逐个取出实例并获取数据：

// 假设页面有一个id为save-all的按钮
$('#save-all').on('click', function() {
    var allFormData = [];
    // 遍历所有表单构建器容器
    $('.build-wrap').each(function() {
        var fbInstance = $(this).data('form-builder');
        var formData = fbInstance.actions.getData('json');
        allFormData.push(formData);
    });
    // 所有表单数据都存储在allFormData数组中
    console.log('所有表单数据：', allFormData);
    // 可将数组转为JSON字符串提交到后端
    // $.post('/save-all-forms', {all_data: JSON.stringify(allFormData)}, function(res) {
    //     // 处理响应
    // });
});

关键说明 #

• 不能直接用$('.build-wrap').formBuilder()批量初始化，因为这种方式无法获取每个独立的实例引用，必须用.each()逐个处理。
• 利用jQuery的data()方法存储实例，既不会污染全局变量，又能让DOM元素和实例一一对应，是最便捷的绑定方式。

内容的提问来源于stack exchange，提问作者Aayush Dahal