Question

我正在使用this bootsnipp for BootStrap.JS来创建动态字段。

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

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

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

Answer 1

您需要找到所选的li并获取它的文本。我建议为每个li添加值，但这取决于你的意思。我为你的ul添加了id并检查了它的动作。我选择的ID是＆＃34; tryME＆＃34;无论如何这里是你需要的代码：

$('#tryMe a').on('click', function(e) {
  e.preventDefault();

  // This removes the class on selected li's
  $("#tryMe li").removeClass("select");

  // adds 'select' class to the parent li of the clicked element
  // 'this' here refers to the clicked a element
  $(this).closest('li').addClass('select');

  // sets the input field's value to the data value of the clicked a element
  $('#tryMe').val($(this).text());
  console.log( $('#tryMe').val());
});

这是你在bootply上更新的剪辑： http://www.bootply.com/e3qqmab4SQ

Answer 2

我注意到这个片段的一个致命缺陷是，没有办法区分字段的多个实例。如果您输入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());
              });
        }

DEMO：http://guides.rubyonrails.org/active_record_validations.html#on

如何从此动态表单中捕获数据

2 个答案: