如何在无表单PHP商品列表中为加入购物车URL添加数量输入字段

你可以直接通过原生JavaScript实现需求，无需修改后端接收逻辑，也不需要新增form表单，完全适配你当前的table结构，修改步骤如下：

第一步：调整HTML结构（可选优化，不强制改原有输出逻辑） #

仅需移除重复的id属性（HTML规范要求id唯一，重复id会导致选择器失效，这就是你之前改table后功能失效的核心原因），其他原有结构可以完全保留：

<table class="products_list">
<tr class="product_list--item">
    <td> 12486XC4 </td>
    <td> Amount: <span class="item_display--1[qty]">1</span> &nbsp; </td>
    <td> <input class="item_qty" type="number" min="1" max="100" value="1" size="5" /> &nbsp; </td>
    <td> <a class="add-cart-btn" href="https://www.example.com/checkout/?1[sku]=12486XC4&1[qty]=1">Add to cart</a> </td>
</tr>
<tr class="product_list--item">
    <td> 13486XC5 </td>
    <td> Amount: <span class="item_display--1[qty]">1</span> &nbsp; </td>
    <td> <input class="item_qty" type="number" min="1" max="100" value="1" size="5" /> &nbsp; </td>
    <td> <a class="add-cart-btn" href="https://www.example.com/checkout/?1[sku]=13486XC5&1[qty]=1">Add to cart</a> </td>
</tr>
<tr class="product_list--item">
    <td> 14486XC6 </td>
    <td> Amount: <span class="item_display--1[qty]">1</span> &nbsp; </td>
    <td> <input class="item_qty" type="number" min="1" max="100" value="1" size="5" /> &nbsp; </td>
    <td> <a class="add-cart-btn" href="https://www.example.com/checkout/?1[sku]=14486XC6&1[qty]=1">Add to cart</a> </td>
</tr>
</table>

第二步：添加JavaScript逻辑 #

把以下代码放到页面</body>标签前即可，功能包含两个：

• 数量输入框变化时，自动同步显示的数量值和加购链接的qty参数
• 点击加购链接时，确保使用最新的数量值跳转，参数格式完全符合你后端PHP的接收要求

// 监听所有数量输入框的变化
document.querySelectorAll('.item_qty').forEach(input => {
  input.addEventListener('input', function() {
    // 拿到当前行的父tr
    const currentRow = this.closest('.product_list--item');
    // 拿到用户输入的数量，最小取1
    const qty = Math.max(parseInt(this.value) || 1, 1);
    this.value = qty;
    // 同步显示的数量
    currentRow.querySelector('.item_display--1\\[qty\\]').textContent = qty;
    // 更新加购链接的qty参数
    const cartLink = currentRow.querySelector('.add-cart-btn');
    const originUrl = new URL(cartLink.href);
    originUrl.searchParams.set('1[qty]', qty);
    cartLink.href = originUrl.toString();
  });
});

// 兼容特殊情况：如果用户没触发input事件直接点链接，再次校验数量
document.querySelectorAll('.add-cart-btn').forEach(btn => {
  btn.addEventListener('click', function(e) {
    const currentRow = this.closest('.product_list--item');
    const qty = Math.max(parseInt(currentRow.querySelector('.item_qty').value) || 1, 1);
    const targetUrl = new URL(this.href);
    targetUrl.searchParams.set('1[qty]', qty);
    this.href = targetUrl.toString();
  });
});

说明 #

• 完全保留了你需要的1[sku]、1[qty]参数格式，后端PHP接收逻辑无需做任何修改
• 不需要新增form表单，不影响你现有的商品列表生成逻辑，只要确保每个商品行的class正确即可
• 针对table结构做了适配，通过closest方法匹配父级行，不会出现多个商品互相干扰的问题

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