javascript - 存在动态列表操作时form to json报错

Question

我的APP中有一个地址，有一个按钮可以根据需要添加地址，但是当我将表单传输到对象并使用ajax提交时，表单对象将只包含最后一个地址。这是 demo

编辑

这个issue已经部分修复了，但是还在考虑如果加上remove函数，我们如何控制list的索引，如果谁有好的想法可以给我评论，谢谢，谢谢来自@weeksdev 的帮助

Answer 1

问题是输入对象 name 对于所有输入都是相同的。修改名称以进行迭代，所有输入都显示在输出中。检查这个fiddle例如

修改后的代码如下:

选项 1:

$(".addAddress").click(function(){
    $("#addressEare").append(' <br><input type="text" readonly="readonly" name="person.addresses.name' + i + '" value="address'+i+'" class="addressName" />');
    i++;
});

选项 2:

如果您希望获得具有 name 属性的对象数组，那么相应的代码将是这样的:

HTML:

<form id="i_form">
    <div id="addressEare" name="">
        <input type="text" readonly="readonly" name="person.addresses[0].name" value="address1" class="addressName" />
    </div>
    <input type="button" value="Add Address" class="addAddress"/>
    <input type="button" value="Show Form Object" class="showFormObj"/>
</form>

JS:

var i=2;
$(".addAddress").click(function(){
    $("#addressEare").append(' <br><input type="text" readonly="readonly" name="person.addresses[' + i + '].name" value="address'+i+'" class="addressName" />');
    i++;
});
$(".showFormObj").click(function(){
    var formObj = form2js("i_form",".");
    alert(JSON.stringify(formObj));
});

这里是 fiddle演示选项 2