从表单提交事件中获取导致提交的按钮答案

【问题标题】：Get the button that caused the submit from the form submit event从表单提交事件中获取导致提交的按钮
【发布时间】：2021-01-28 18:49:04
【问题描述】：

我正在尝试查找触发表单提交的提交按钮的值，因此我可以做不同的事情，实际上我使用这个：

$("#regform").on('submit', function(e) {
  if (($(document.activeElement).val()) == "cf") {
    e.preventDefault();
    // This doesnt work on iOs Devices
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="action.php" method="post" id="regform" class="regform" accept-charset="utf-8">
  <button class="btn btn-outline-primary" type="submit" id="check-cf" value="cf">Check CF</button>
  <input type="submit" name="submit" class="btn btn-success btn-lg btn-block" value="Reg">
</form>

document.activeElement 在很多情况下都不起作用。我现在应该使用什么来兼容来实现这一目标？

【问题讨论】：

$("input:focus").dowhatever();
您对dowhatever() 部分的期望究竟是什么？1）实际上是在现实中，2）实现？
或if ( $("#check-cf").is(":focus") ) { }
要回答标题中的问题，您可以检索event.submitter。它返回一个触发提交的元素，如果提交是通过在输入上按 ENTER 触发的，则返回 null。对于 jQuery 事件，您必须检查 event.originalEvent.submitter，因为 jQuery 的事件对象不包含所述属性。
对上一条评论的一个小修正，当在输入上按 ENTER 时，如果表单中没有实际的提交按钮，则仅返回 null，否则返回该按钮。

标签： javascript html jquery webforms

【解决方案1】：

只需将value="cf" 按钮设为type="button" 元素即可。那么你根本不需要任何 JS 代码来阻止表单提交。

<form action="action.php" method="post" id="regform" class="regform" accept-charset="utf-8">
  <button type="button" class="btn btn-outline-primary" id="check-cf" value="cf">Check CF</button>
  <input type="submit" name="submit" class="btn btn-success btn-lg btn-block" value="Reg">
</form>

如果出于某种原因，您不能这样做，那么您需要挂钩到表单中提交按钮的click 事件，检测它们的value，并阻止从那里提交表单：

$('form :submit').on('click', function(e) {
  if ($(this).val() == "cf") {
    e.preventDefault();
    console.log('form submission blocked...');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="action.php" method="post" id="regform" class="regform" accept-charset="utf-8">
  <button class="btn btn-outline-primary" type="submit" id="check-cf" value="cf">Check CF</button>
  <input type="submit" name="submit" class="btn btn-success btn-lg btn-block" value="Reg">
</form>

【讨论】：

第二个解决方案完美，谢谢！

【解决方案2】：

在我看来，有两种方法可以做到这一点

$("#regform").on('submit', function(e) {
   if ( $("#check-cf").is(":focus") ) {
     alert( 'check-cf clicked');
  }
  else {
    alert( 'Reg clicked');
  }
  $("#regform").submit()   or return false;  // if you dont want to submit it
});

或

$(document).on("click", ".btn", function() {
   if ( $(this).val() == 'cf' ) {
      alert( 'check-cf clicked');
  }
  else {
     alert( 'Reg clicked');
  }
  $("#regform").submit()   or return false;  // if you dont want to submit it
})

【讨论】：

第一个解决方案仍然无法在 iO 上运行
那么第二个呢？