Question

我有HTML表单和两个提交按钮。其中之一具有formaction属性。

<form action="Action1" method="POST" id="myForm">
    <input type="text" name="field1">
    <input type="text" name="field2">
    <button type="submit">Search</button>
    <button type="submit" formaction="Action2">Save search defaults</button>
</form>

然后，我有以下Javascript代码：

$('#myForm').on('submit', function () {
    var form = $(this);
    var url = form.attr('action');

    console.log(url);
});

即使我用url单击按钮，为什么Action1总是等于formaction="Action2"？当我单击第二个按钮时，如何获得正确的表单操作？

Answer 1

问题在于您正在听表单提交-因此代码中的$(this)使得form成为<form>元素。您可以改为点击“提交”按钮：

$("[type='submit']").on("click", function() {
    var url = $(this).attr("formaction");
    console.log(url);
});

Answer 2

正如已经指出的那样，$(this).attr('action')始终引用表单本身的action属性，因为这是事件定义的元素。

您自己可以做的是检查document.activeElement中的formaction，这将为您提供当前关注的元素。如果未定义，则返回到表单动作本身。

演示：

$('#myForm').on('submit', function (e) {
  e.preventDefault();
  var url = $(document.activeElement).attr('formaction') || $(this).attr('action');

  console.log(url);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="Action1" method="POST" id="myForm">
  <input type="text" name="field1">
  <input type="text" name="field2">
  <button type="submit">Search</button>
  <button type="submit" formaction="Action2">Save search defaults</button>
</form>

formaction属性和jQuery

2 个答案: