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

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

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

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

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

2 个答案: