如何修改HTML结构使两个form标签独立正常工作？

HTML规范明确禁止<form>标签嵌套，浏览器解析这种无效结构时会自动修正，通常会忽略内部表单或破坏表单的正确绑定，这就是你内部删除表单无法正常工作的直接原因。

推荐采用AJAX提交删除请求的方式，彻底避免表单嵌套问题，同时保持功能独立性：

步骤1：修改HTML结构 #

移除内部的删除表单，将删除按钮改为普通按钮，并添加自定义属性存储产品信息：

<!-- PRODUCT CART : begin -->
<form class="product-cart" method="post" action="http://localhost:4000/checkout">
    <!-- CART LIST : begin -->
    <ul class="product-cart__list">
        <% products.forEach(product => { %>
        <!-- CART ITEM : begin -->
        <li class="product-cart__item">
            <!-- 其他商品信息部分保持不变 -->
            
            <!-- ITEM ITEM COL : begin -->
            <div class="product-cart__item-col product-cart__item-col--remove">
                <!-- 替换原来的删除表单为普通按钮 -->
                <button type="button" 
                        class="product-cart__item-remove-btn"
                        data-product-name="<%= product.name %>">
                    <span class="product-cart__item-remove-btn-icon" aria-hidden="true"></span>
                </button>
            </div>
            <!-- ITEM ITEM COL : end -->
        </li>
        <!-- CART ITEM : end -->
        <% }); %>
    </ul>
    <!-- CART LIST : end -->

    <!-- 购物车摘要、结算按钮等部分保持不变 -->
</form>
<!-- PRODUCT CART : end -->

步骤2：添加JavaScript逻辑 #

在页面的<script>标签中添加处理删除请求的代码：

// 监听所有删除按钮的点击事件
document.querySelectorAll('.product-cart__item-remove-btn').forEach(btn => {
    btn.addEventListener('click', async function() {
        const productName = this.getAttribute('data-product-name');
        
        try {
            const response = await fetch('/remove-from-cart', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `productName=${encodeURIComponent(productName)}`
            });

            if (response.ok) {
                // 删除成功后，刷新购物车页面或更新DOM
                window.location.reload();
                // 或者不刷新页面，通过AJAX获取最新购物车数据并更新页面
            } else {
                alert('删除商品失败，请重试');
            }
        } catch (error) {
            console.error('删除请求出错:', error);
            alert('网络错误，请稍后重试');
        }
    });
});

备选方案：拆分表单（需调整布局） #

如果坚持使用表单提交，可以调整HTML结构，让两个表单完全独立：

1. 将结算表单的范围缩小，仅包含结算所需字段（总金额、优惠券等），不包裹商品列表。
2. 每个删除表单作为独立表单放在对应商品的<li>中，与结算表单平级。
3. 商品数量调整逻辑需单独处理，确保结算时能获取最新数量数据。

这种方案需要额外的布局调整和逻辑处理，不如AJAX方式简洁。

修改后，结算表单可正常提交到/checkout，删除按钮通过AJAX提交删除请求，两个操作完全独立，不会互相干扰。

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