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

Question

我试图找到触发表单提交的提交按钮的值，所以根据我可以做不同的事情，实际上我使用这个：

$("#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 在许多情况下不起作用。我现在应该使用什么来兼容才能实现这一目标？

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

Answer 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
})

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

Get the button that caused the submit from the form submit event

html

javascript

jquery

webforms