Question

我在表单元素中的div内有2个输入字段，如

<form>
<div id="si-goal-section">
    <div class="si-goal-container">
        <input type="text" class="si-input goal-icon" name="goal-icon">
        <input type="text" class="si-input goal-title" name="goal-title">
    </div>
</div>
<div>
    <button type="button" id="goal-btn">Add goal</button>
</div>
</form>

当我点击“添加目标”按钮时，我附加一个新的“si-goal-container”div。这是

的脚本

$('form #goal-btn').click(function() {
    $('form #si-goal-section').append('<div class="si-goal-container"><input type="text" class="si-input goal-icon" name="goal-icon"><input type="text" class="si-input goal-title" name="goal-title"></div>')
})

然后，我在JS中创建一个数组变量，并像这样收集表单数据并将其传递给它

var data_to_send = []
$('form').find('.si-input').each(function() {
    if($(this).hasClass('goal-icon')) {
       data_to_send[$(this).attr('name')] = $(this).val() 
    }
    if($(this).hasClass('goal-title')) {
       data_to_send[$(this).attr('name')] = $(this).val() 
    }
})

所以这种方法不起作用，因为名称字段是相同的，值只是重写。还有什么可以在这里完成，所以我可以将附加的数据存储在数组中，稍后在php端访问它？

我试过这样的事情

var data_to_send = {}
data_to_send.goal = []
$('form').find('.si-input').each(function() {
    if($(this).attr('name') != undefined) {
        data_to_send.goal.push({
            'goalIcon': $(this).find('.goal-icon').val()
            'goalTitle': $(this).find('goal-title').val()
        })
    }
})

但这也没有给我所需要的o / p。我需要我的data_to_send数组在ajax调用中看起来像这样。

...
data_to_send['bannerImage']: 
data_to_send['goalName']:
data_to_send['goalIcon'][0]:
data_to_send['goalTitle'][0]:
data_to_send['goalIcon'][1]:
data_to_send['goalTitle'][1]:
...

将字段追加并存储到数组中的正确方法是什么？我正在使用serialize（）然后如何仅将其用于特定字段？

Answer 1

向id的{{1}} input elements提供si-goal-section，如下所示：

<div class="si-goal-container">
    <input type="text" id="goalicon_1" class="si-input goal-icon" name="goal-icon"/>
    <input type="text" id="goaltitle_1" class="si-input goal-title" name="goal-title"/>
</div>

现在位于JS click event button id的{{1}}上的si-goal-section来自上一个split和_的标题和图标$('form #goal-btn').click(function() { var goalIconID=parseInt($(".si-goal-container:last .goal-icon").attr('id').split("_")[1])+1; //fetch .goal-icon's and goal-title's id by from last .si-goal-container and add + 1 [increment id] var goalTitleID=parseInt($(".si-goal-container:last .goal-title").attr('id').split("_")[1])+1; $('form #si-goal-section').append('<div class="si-goal-container"><input type="text" class="si-input goal-icon" id="goalicon_'+goalIconID+'" name="goal-icon"><input type="text" id="goaltitle_'+goalTitleID+'" class="si-input goal-title" name="goal-title"></div>'); //add id to the newly created elements })如下：

array

因此，您现在可以拥有独特的元素并将其推送到values @ConfigurationProperites

<强> DEMO

Answer 2

试试这个：您可以迭代si-goal-container div，然后阅读其中的si-input个输入字段。将值存储在地图中并将地图添加到数组中，如下所示

$(document).ready(function(e) {
    $('form #goal-btn').click(function() {
       $('form #si-goal-section').append('<div class="si-goal-container"><input type="text" class="si-input goal-icon" name="goal-icon"><input type="text" class="si-input goal-title" name="goal-title"></div>')
    });

   $('form #value-goal-btn').click(function() {   
       var data_to_send = new Array();
       $('form').find('div.si-goal-container').each(function() {
           var container_data = {};
           $(this).find('.si-input').each(function(){
              container_data[$(this).attr('name')] = $(this).val();
           });
          data_to_send.push(container_data);
        });
     alert(JSON.stringify(data_to_send));
    });
});

<强> JSFiddle Demo

无法将数据正确附加到JS数组变量

2 个答案: