如何在提交事件中获得表单操作?

Question

有一个带有两个提交按钮的简单表单，如何在submit事件中获取formaction属性？

网页代码：

<form id="FORM" action="/original">
<input type="text">
</form>
<button form="FORM">original</button>
<button form="FORM" formaction="/formaction">formaction</button>

使用formaction按钮提交时，表单action在事件中仍然是原始的。

Answer 1

您可以使用 document.activeElement 抓取当前具有焦点的元素(在发送提交事件后(来获取被覆盖的表单action

您可以查看是否将formaction覆盖附加到发送提交事件的按钮，否则如果没有，则使用原始action

document.getElementById("FORM").addEventListener("submit", handleForm);
function handleForm(e) {
e.preventDefault(); // for this example only
let formAction = e.target.getAttribute("action");
let activeElementAction = document.activeElement.getAttribute("formaction");
let action = activeElementAction || formAction;
console.log(action);
}

<form id="FORM" action="/original">
<input type="text">
</form>
<button form="FORM">original</button>
<button form="FORM" formaction="/formaction">formaction</button>

Answer 2

您可以使用SubmitEvent的属性submitter并检查属性是否已填充formactionhttps://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent

此属性在 JQuery 提交事件的originalEvent属性中引用

var submitter = $(event.originalEvent.submitter)
if (submitter.attr('formaction')) {
...     
} else {
...
}