Node+Express中如何获取动态表单选中的同名name输入框值

嘿，这个问题我之前做Node.js+Express项目的时候也碰到过，核心原因就是所有隐藏输入框都用了同一个name="car"，表单提交时浏览器会把所有同名参数都发出去，所以后端req.body.car拿到的要么是数组（如果Express的extended配置开着）要么是最后一个值，肯定不是你要的当前车辆ID。

给你两个最优解决方案，按需选就行：

方案一：给每个车辆卡片套独立表单（最简单直接） #

这是最传统也最省心的方式，把每辆车的卡片包裹在单独的<form>标签里，这样点击对应卡片的「Confirm Request」按钮时，只会提交当前表单里的隐藏输入框。

修改你的EJS代码如下：

<% if (cars && cars.length > 0) { %>
<% cars.forEach(function(car) { %>
<!-- 给每个车辆单独套一个表单，指定提交地址 -->
<form method="POST" action="/confirm-request" class="card mb-3">
  <div class="card-body text-capitalize">
    <div class="dropdown show">
      <!-- 注意给dropdown的ID加car.id后缀，避免DOM重复ID问题 -->
      <a class="dropdown-toggle float-right" href="#" role="button" id="dropdownMenuLink-<%= car.id %>" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink-<%= car.id %>">
        <!-- 按钮还是type="submit"，属于当前表单 -->
        <button class="dropdown-item" type="submit">Confirm Request</button>
        <a class="dropdown-item" href="/home">Cancel Request</a>
      </div>
    </div>
    <input type="number" name="car" value="<%= car.id %>" hidden />
    <strong><%= car.brand + ' ' + car.model %></strong>
  </div>
</form>
<% }) %>
<% } %>

这样改完之后，后端用let car_id = req.body.car;就能精准拿到当前点击的车辆ID了，完全不需要额外JS，兼容性拉满。

方案二：用AJAX+Data属性（无刷新提交，体验更好） #

如果你的项目需要无刷新提交、不想页面跳转，那可以给按钮加个存储车辆ID的data属性，然后用JS监听点击事件，手动发送请求。

第一步：修改EJS里的按钮和输入框 #

<% if (cars && cars.length > 0) { %>
<% cars.forEach(function(car) { %>
<div class="card mb-3">
  <div class="card-body text-capitalize">
    <div class="dropdown show">
      <a class="dropdown-toggle float-right" href="#" role="button" id="dropdownMenuLink-<%= car.id %>" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink-<%= car.id %>">
        <!-- 把按钮type改成button，加data-car-id存ID -->
        <button class="dropdown-item confirm-btn" type="button" data-car-id="<%= car.id %>">Confirm Request</button>
        <a class="dropdown-item" href="/home">Cancel Request</a>
      </div>
    </div>
    <strong><%= car.brand + ' ' + car.model %></strong>
  </div>
</div>
<% }) %>
<% } %>

第二步：添加JavaScript监听事件 #

// 给所有确认按钮绑定点击事件
document.querySelectorAll('.confirm-btn').forEach(btn => {
  btn.addEventListener('click', async () => {
    const carId = btn.dataset.carId;
    try {
      const response = await fetch('/confirm-request', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          // 如果你的项目启用了CSRF防护，记得带上CSRF Token
          'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]')?.content || ''
        },
        body: `car=${carId}`
      });
      
      if (response.ok) {
        // 请求成功后的操作，比如提示用户或者跳转
        alert('请求已确认');
        window.location.href = '/home';
      } else {
        alert('确认失败，请重试');
      }
    } catch (err) {
      console.error('请求出错：', err);
      alert('网络错误，请稍后再试');
    }
  });
});

后端同样用req.body.car就能拿到正确的ID，而且全程无刷新，用户体验更好。

总结 #

• 如果是传统服务端渲染、不需要复杂交互，方案一是最优解，代码改动少，稳定性高；
• 如果追求现代前端的无刷新体验，方案二更合适，灵活性更强。

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