javascript - 如何从这个动态表单中捕获数据

Question

我正在使用 this用于 BootStrap.JS 的 bootsnipp 以创建动态字段。

如何从这些动态字段中捕获数据作为键值对？

如果我在同一页面上有 2 个部分需要这些动态字段集怎么办？

任何示例片段都会有所帮助。

Answer 1

我注意到此代码段的一个致命缺陷是无法区分字段的多个实例。如果您输入 2 个电话号码，请输入哪个？我想数据可以从服务器端整理出来，但我只是前端，对后端的神奇领域知之甚少。

我添加了一个按钮#data、一个隐藏输入.cache 和一个函数collectData(ele)。 HTML 和 jQuery 注释了每个重要组件的功能和用途的详细信息。

 //
/* collectData Function~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~/ 
This function given a group of elements (in classic selector format) will assign each 
element the values of the closest fields as a unique name and the user entered value 
(if any.)
Use the console to see it gather data.
*/
        var collectData = function(ele) {
            var $tgt = $(ele);
            $tgt.each(function(index) {
// $tgt == $(this)
                var $fieldNames = $(this).next('.input-group-select-val').val();
                var $fieldValues=$(this).closest('.form-group').find('.form-control').val();

// Including index to each $fieldName in order to make each key/value pair unique.

                $(this).attr('name', $fieldNames+index);
                console.log('name: '+$(this).attr('name'));
                $(this).val($fieldValues);
                console.log('value: '+$(this).val());
              });
        }

演示:http://bootsnipp.com/user/snippets/xaAXG