當存在動態列表操作時，形成到json錯誤

Question

我的APP中有一個地址，有一個按鈕會在必要時添加地址，但是當我將表單傳輸到對象並使用ajax submit時，表單對象將只包含最后一個地址。 這是demo

編輯

這個問題已被部分修復，但我們仍然考慮是否添加刪除功能，如何控制列表索引，如果有人有好主意，你可以給我一個評論，謝謝，並感謝來自@的幫助weeksdev

Answer 1

問題是輸入對象name對於所有輸入都是相同的。 修改名稱以進行迭代，並在輸出中顯示所有輸入。 例如，檢查這個小提琴

以下是帶有更改的對應代碼：

選項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));
});

這是演示選項2的小提琴