Laravel中点击订阅按钮总是获取最后一个Event ID的问题

你遇到的问题根源是所有活动项都在同一个<form>标签内，循环生成的多个name="eventId"的隐藏输入框，在提交表单时浏览器只会发送最后一个输入框的值，导致后端每次拿到的都是最后一个活动的ID。

下面提供两种简单直接的解决方案：

方案1：每个活动单独嵌套表单 #

把表单标签放到循环内部，让每个活动对应独立的表单，点击订阅按钮时只会提交当前活动的ID：

<div class="row">
  @foreach($data as $index => $event)
  <div class="col-sm-6 col-md-4 col-lg-3">
    <div class="box">
      <!-- 每个活动单独的表单 -->
      <form action="{{route('postSubscribed')}}" method="POST">
        @csrf
        <input type="hidden" name="eventId" value="{{ $event->id }}">
        
        <div class="img-box">
          <img src="{{ asset('storage/' . $event->image) }}" alt="">
        </div>
        <div class="detail-box">
          <h6>{{$event->eventName}}</h6>
          <h6>
            Price
            <span>{{$event->price}}</span>
          </h6>
        </div>
        <div class="detail-box">
          <p class="mute-text">{{$event->desc}}</p>
        </div>
        <div class="location-box">
          <span style="font-size: 24px;">&#x1F4CD;</span>
          <p class="location-text">{{$event->location}}</p>
        </div>
        <div class="btn-box">
          <button type="submit">Subscribe</button>
        </div>
      </form>
    </div>
  </div>
@endforeach
</div>

方案2：利用按钮的value传递ID（无需拆分表单） #

如果想保留外层的主表单，可以去掉隐藏字段，直接把活动ID绑定到订阅按钮的value属性，同时将按钮的name设为eventId：

<form action="{{route('postSubscribed')}}" method="POST">
  @csrf
  <input type="text" name="search" placeholder="Search Event...">
  
  <div class="row">
    @foreach($data as $index => $event)
    <div class="col-sm-6 col-md-4 col-lg-3">
      <div class="box">
        <div class="img-box">
          <img src="{{ asset('storage/' . $event->image) }}" alt="">
        </div>
        <div class="detail-box">
          <h6>{{$event->eventName}}</h6>
          <h6>
            Price
            <span>{{$event->price}}</span>
          </h6>
        </div>
        <div class="detail-box">
          <p class="mute-text">{{$event->desc}}</p>
        </div>
        <div class="location-box">
          <span style="font-size: 24px;">&#x1F4CD;</span>
          <p class="location-text">{{$event->location}}</p>
        </div>
        <div class="btn-box">
          <!-- 按钮的name为eventId，value为当前活动ID -->
          <button name="eventId" type="submit" value="{{ $event->id }}">
            Subscribe
          </button>
        </div>
      </div>
    </div>
    @endforeach
  </div>
</form>

后端代码无需修改，依然可以通过$request->input('eventId')获取到点击的活动ID——因为点击哪个按钮，该按钮的name和value就会被提交到后端。

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