表单到json错误时，有一个动态列表操作

form to json error when there is a dynamic list operation

本文关键字：有一个 动态 列表 操作 json 错误 表单      更新时间：2023-09-26

有一个地址在我的APP，有一个按钮，将添加地址，如果有必要，但当我转移到对象的表单和使用ajax提交，表单对象将只包含最后一个地址。这是demo

编辑

这个问题已经部分修复，但我们仍然在考虑是否添加了删除功能，我们如何控制列表的索引，如果有人有好主意，你可以给我一个评论，谢谢，并感谢@weeksdev

的帮助

问题是输入对象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

相关文章：