如何根据单击的提交按钮传递不同的隐藏输入字段答案

【问题标题】：How to pass different hidden input fields based on the clicked submit button如何根据单击的提交按钮传递不同的隐藏输入字段
【发布时间】：2019-02-27 19:54:25
【问题描述】：

我有两个名称相同但id 不同的隐藏输入字段。我想通过基于不同提交按钮的操作来传递它。当我单击“正常”进程按钮时，它应该传递#normalfee 隐藏字段值，当单击“紧急”时，它应该传递#urgentfee 值。

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

【问题讨论】：

你可以定义一个函数在提交时运行它，或者你可以观察变量的变化，当用户交互时，并根据它改变值
为什么不使用两种切换形式呢？
将value 放在提交按钮上并在服务器端读取它会更有意义。这样你就可以根据发送的urgent/normal 的值知道价格应该是多少，并且有人在客户端操纵该值并不是那么容易
@RoryMcCrossan ：你想说我应该在提交按钮中设置值并将其传递给服务器端。
@Mamun : 谢谢你的代码，让我试试这个伙伴。

标签： javascript jquery html forms

【解决方案1】：

我会使用单选按钮来选择流程的状态，然后在接收端推断金额。这样用户就无法修改值，您只需一个按钮即可提交表单，同时仍有多个选项可供选择。

<form name="home" action="#" method="post">
  Fee type:<br>
  <input type="radio" name="fee" value="normalfee">Normal<br>
  <input type="radio" name="fee" value="ugrentfee">Urgent<br>
  <input type="submit" name="Process">
</form>

https://jsfiddle.net/hx16eawk/1/

【讨论】：

但是如果你想有两个选择（比如点击两张图片），又不想走那条路怎么办？有没有其他办法？
那你使用输入类型checkbox。 jsfiddle.net/Lrfw4t8p

【解决方案2】：

根据表格Controls

提交表单进行处理时，某些控件的名称与当前值配对，这些对与表单一起提交。

您可以在按钮单击时检查属性值以删除最终会阻止该值提交的名称属性：

$('input[type=submit]').click(function(){
  $('#normalfee, #urgentfee').attr('name', 'fee');
  if($(this).attr('name') == 'Normal Process'){
    $('#urgentfee').removeAttr('name');
    $('#urgentfee').attr('disabled', 'disabled');
  }
  else{
    $('#normalfee').removeAttr('name');
    $('#normalfee').attr('disabled', 'disabled');
  }
  var passVal = $('form').serialize();
  alert(passVal);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="home" action="#" method="post">
  <input type="hidden" name="fee" id="normalfee" value="49">
  <input type="hidden" name="fee" id="urgentfee" value="99">
  <input type="submit" name="Normal Process">
  <input type="submit" name="urgent process">
</form>

【讨论】：

这不会影响表单提交时发送的数据。您所做的就是在控制台中显示该值。
没问题。如果这是您要采取的路线，我还建议禁用该字段。