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

Question

我有两个隐藏的输入字段，名称相同但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>

Answer 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/

Answer 2

根据形式Controls

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

您可以在按钮单击时检查属性值以删除name属性，这将最终阻止值提交：

$('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>