如何根据点击的提交按钮传递对应的hidden input字段值

嘿，我来帮你搞定这个需求！你现在的表单里有两个name="fee"的隐藏字段，不管点击哪个提交按钮，这两个值都会被一起发送到后端，这显然不是你想要的效果。下面给你几个简单可行的解决方案，推荐最后一种最简洁的：

方案1：纯HTML实现（推荐） #

直接利用提交按钮的name和value属性来传递fee值，不需要额外的隐藏字段。当点击某个提交按钮时，只有该按钮的name和value会被包含在表单提交数据中：

<form name="home" action="#" method="post">
  <input type="submit" name="fee" value="49">Normal Process</input>
  <input type="submit" name="fee" value="99">urgent process</input>
</form>

这样点击“Normal Process”按钮时，后端会收到fee=49；点击“urgent process”时收到fee=99，完全符合你的需求，而且不需要任何JS代码。

方案2：JavaScript动态修改隐藏字段值 #

如果你必须保留原来的隐藏字段结构，可以用JS在点击按钮时动态修改唯一的隐藏字段值：

首先修改表单，只保留一个隐藏字段：

<form name="home" action="#" method="post">
  <input type="hidden" name="fee" id="feeInput" value="">
  <input type="submit" onclick="setFee('49')" value="Normal Process">
  <input type="submit" onclick="setFee('99')" value="urgent process">
</form>

然后添加JavaScript函数：

function setFee(amount) {
  document.getElementById('feeInput').value = amount;
}

点击按钮时，函数会先把对应的fee值赋值给隐藏字段，再提交表单，确保后端只收到你想要的那个值。

方案3：后端配合判断提交类型 #

如果后端可以调整逻辑，也可以给提交按钮设置统一的name，后端根据按钮的值来选择对应的fee：

<form name="home" action="#" method="post">
  <input type="hidden" name="normalfee" value="49">
  <input type="hidden" name="urgentfee" value="99">
  <input type="submit" name="processType" value="Normal">
  <input type="submit" name="processType" value="Urgent">
</form>

后端接收时，判断processType的值是Normal还是Urgent，然后分别取normalfee或urgentfee的值即可。

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