Laravel视图点击刷新标签无法提交对应行ID的问题求助

问题原因 #

你当前代码中所有行的表单都使用了同一个ID update-keranjang，而document.getElementById()只会返回页面中第一个匹配该ID的元素，因此无论点击哪一行的刷新按钮，都会提交第一行的表单。

解决方案 #

方法一：给每个表单生成唯一ID

通过结合购物车项的ID，为每行的表单生成唯一ID，确保点击对应按钮时提交正确的表单。

修改表单代码：

<td class="shoping__cart__quantity">
    <div class="quantity">
        <!-- 用购物车项ID拼接表单ID，保证唯一性 -->
        <form id="update-keranjang-{{ $p->id }}" action="{{ route('UpdateKeranjang') }}" method="post">
            {{ csrf_field() }}
            <div class="pro-qty">
                <input type="text" name="keranjang" value="{{ $p->qty }}" required>
                <input type="text" name="id" value="{{ $p->id}}" hidden>
            </div>
        </form>
    </div>
</td>

修改提交按钮代码：

<td class="shoping__cart__item__close">
    <a style="color: black; margin-right: 20px" class="fa fa-refresh" href="{{ route('UpdateKeranjang') }}"
       <!-- 调用对应唯一ID的表单提交方法 -->
       onclick="event.preventDefault(); document.getElementById('update-keranjang-{{ $p->id }}').submit();">
    </a>
</td>

方法二：通过DOM关系定位当前行表单（推荐）

无需依赖唯一ID，通过DOM元素的层级关系，找到当前点击按钮所在行的表单，灵活性更强。

修改表单代码：

<td class="shoping__cart__quantity">
    <div class="quantity">
        <!-- 移除ID，添加统一类名 -->
        <form class="update-keranjang-form" action="{{ route('UpdateKeranjang') }}" method="post">
            {{ csrf_field() }}
            <div class="pro-qty">
                <input type="text" name="keranjang" value="{{ $p->qty }}" required>
                <input type="text" name="id" value="{{ $p->id}}" hidden>
            </div>
        </form>
    </div>
</td>

修改提交按钮代码：

<td class="shoping__cart__item__close">
    <a style="color: black; margin-right: 20px" class="fa fa-refresh" href="{{ route('UpdateKeranjang') }}"
       <!-- 通过closest找到当前行，再定位表单 -->
       onclick="event.preventDefault(); this.closest('tr').querySelector('.update-keranjang-form').submit();">
    </a>
</td>

说明 #

方法二中的this.closest('tr')会向上查找当前点击元素所在的<tr>标签，再通过querySelector找到该行内的表单，确保提交的是当前行对应的表单数据，避免了ID重复的问题，后期维护更省心。

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