引入bootstrap-table后Django中Post按钮失效问题求助

1. 无效嵌套表单结构：你的HTML代码里存在<form>嵌套的情况，这违反HTML规范，浏览器会自动修正DOM结构，直接导致表单提交逻辑混乱。
2. Bootstrap-Table的DOM重构：启用data-toggle="table"后，Bootstrap-Table会对表格DOM进行重构（比如克隆元素、生成新节点），原表单的提交事件或属性会被破坏，最终导致按钮点击无响应。

第一步：修复HTML表单结构 #

先移除嵌套的<form>标签，为每行的提交按钮配置独立表单，确保表单无嵌套。以下是两种调整方案：

方案A：表单包裹整行内容 #

<table
    id="table"
    data-toggle="table"
    data-search="true"
    data-height="650"
    data-show-columns="true">
    <thead>
        <tr>
            <th data-sortable="true">ID</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        {% if df %}
        {% for i in df %}
        <tr>
            <td>
                <form method="POST" class="row-form">
                    {% csrf_token %}
                    <input value="{{i.ID}}" name="dataId" type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
                    <button type="submit" class="btn btn-secondary mt-2" name="updatePlacement">Save</button>
                </form>
            </td>
        </tr>
        {% endfor %}
        {% endif %}
    </tbody>
</table>

方案B：按钮单独放单元格，用隐藏域传递ID #

<table
    id="table"
    data-toggle="table"
    data-search="true"
    data-height="650"
    data-show-columns="true">
    <thead>
        <tr>
            <th data-sortable="true">ID</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        {% if df %}
        {% for i in df %}
        <tr>
            <td>
                <input value="{{i.ID}}" name="dataId" type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
            </td>
            <td>
                <form method="POST" class="row-form">
                    {% csrf_token %}
                    <input type="hidden" name="dataId" value="{{i.ID}}">
                    <button type="submit" class="btn btn-secondary" name="updatePlacement">Save</button>
                </form>
            </td>
        </tr>
        {% endfor %}
        {% endif %}
    </tbody>
</table>

第二步：用事件委托确保提交事件生效 #

由于Bootstrap-Table会动态修改DOM，直接绑定的事件容易失效，用事件委托监听按钮点击，手动触发表单提交：

// 放在页面底部或独立JS文件中
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('table').addEventListener('click', function(e) {
        if (e.target.classList.contains('btn-secondary') && e.target.name === 'updatePlacement') {
            e.preventDefault();
            const form = e.target.closest('form');
            form && form.submit();
        }
    });
});

第三步：完善视图逻辑 #

确保视图能正确接收并处理表单参数：

def post(self, request):
    if "updatePlacement" in request.POST:
        data_id = request.POST.get('dataId')
        print(f'收到更新请求，目标ID: {data_id}')
        # 这里添加你的业务逻辑，比如更新数据库记录
        return render(request, "placement/index.html")
    # 处理其他POST请求场景
    return super().post(request)

• 永远不要在HTML中嵌套<form>标签，这会引发不可预期的DOM异常。
• 若需要更精细控制表格初始化，可改用手动初始化替代data-toggle="table"：

$(function() {
    $('#table').bootstrapTable({
        search: true,
        height: 650,
        showColumns: true
        // 其他配置项按需添加
    });
});

内容的提问来源于stack exchange，提问作者Shinhee Park