如何提交包含任务主信息和动态生成的任务子项列表的表单

你现有代码存在几个需要先修复的问题：

• 主信息区域第一个输入框（ID Mission）的name和id属性错误写成了Name_Mission，和第二个输入框重复，会导致主信息提交冲突
• 动态添加的子项输入框name没有配置数组格式，后端无法识别多条子项数据
• 动态添加的删除按钮没有绑定事件，且所有元素id重复，不符合DOM规范

方案1：原生Form表单提交（无需额外JS逻辑，适配后端表单参数绑定） #

步骤1：修正主信息HTML #

把主信息区域的第一个输入框属性修正，避免参数冲突：

<!-- 原来的ID Mission输入框修正后 -->
<tr>
    <td>ID Mission :</td>
    <td>
        <input id="ID_Mission" name="ID_Mission" type="text" value="0" />
    </td>
</tr>
<tr>
    <td>Name Mission :</td>
    <td>
        <input id="Name_Mission" name="Name_Mission" type="text" value="0" />
    </td>
</tr>

步骤2：修改动态添加行的JS逻辑 #

给子项输入框的name加上索引后缀，同时修正重复ID、绑定删除事件：

// 绑定删除按钮事件（事件委托适配动态添加元素）
$('#Table_Missions').on('click', '#btn_delete_mission', function() {
    $(this).closest('tr').remove();
})

$('#btn_create_Mission').click(function () {
    var t = $("#Table_Missions tbody")
    // 取当前已有行数作为新行的索引
    var index = t.find('tr').length;
    var l = '<tr>';
    l += '<td hidden="hidden">';
    // 这里的name格式适配多数后端的数组/列表绑定规则，比如Java Spring、ASP.NET都支持
    l += `<input name="MissionDetails[${index}].ID_Mission_Detalis" type="text" value="0" />`;
    l += '</td>';
    l += '<td>';
    l += `<input name="MissionDetails[${index}].Text_Mission" type="text" />`;
    l += '</td>';
    l += '<td>';
    l += `<input name="MissionDetails[${index}].Value_Mission" type="text" />`;
    l += '</td>';
    l += '<td>';
    l += '<button type="button" id="btn_delete_mission">DELETE PART MISSION</button>';
    l += '</tr>';
    t.append(l);
})

修改完成后直接点击提交按钮即可，后端接口只要定义对应参数类即可接收：

• 主参数：ID_Mission、Name_Mission
• 子项列表参数：名为MissionDetails的数组/列表，每个元素包含ID_Mission_Detalis、Text_Mission、Value_Mission三个属性

方案2：AJAX提交（灵活度更高，支持自定义返回处理） #

如果不想修改输入框name属性，可以拦截表单提交事件，手动组装数据发送请求：

// 拦截表单提交事件
$('form').submit(function(e) {
    // 阻止默认表单提交
    e.preventDefault();
    // 组装主信息
    var postData = {
        ID_Mission: $('#ID_Mission').val(),
        Name_Mission: $('#Name_Mission').val(),
        MissionDetails: []
    };
    // 遍历所有子项行
    $('#Table_Missions tbody tr').each(function() {
        var row = $(this);
        postData.MissionDetails.push({
            ID_Mission_Detalis: row.find('input[name*="ID_Mission_Detalis"]').val(),
            Text_Mission: row.find('input[name*="Text_Mission"]').val(),
            Value_Mission: row.find('input[name*="Value_Mission"]').val()
        })
    })
    // 发送请求
    $.ajax({
        url: '/Programe/Save_Mission',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(postData),
        success: function(res) {
            // 自定义提交成功逻辑
            alert('保存成功')
        },
        error: function(err) {
            // 自定义提交失败逻辑
            alert('保存失败')
        }
    })
})

如果用这个方案，后端接口需要适配JSON格式的请求体参数。

内容的提问来源于stack exchange，提问作者ebrahem b