javascript - 使用外部按钮处理表单的提交事件

Question

我对原生 html 表单有一个小问题。 我想提交带有外部按钮的表单，正如您在附加的 fiddle 链接中看到的那样。但是，同时我需要防止生成 xhr.request。所以，就我而言，我需要处理表单上发生的submit.event。 如果通过内部按钮提交表单，我会看到它，但如果通过外部按钮直接调用 .submit() 事件，则无法处理。有人有食谱吗？ 非常感谢您的反馈:)

var formElem = document.querySelector('#form');
var innerButtonElem = document.querySelector('#innerButton');
var outerButtonElem = document.querySelector('#outerButton');

formElem.addEventListener('submit', (event) => {
	console.log('formElem', event);
})

innerButton.addEventListener('submit', (event) => {
	console.log('innerButton submit', event);
})

innerButton.addEventListener('click', (event) => {
	console.log('innerButton click', event);
})

outerButtonElem.addEventListener('click', (event) => {
	console.log('outerButton', event);
  formElem.submit();
})

#innerButton {
  display: block;
  margin: 5px 0;
}

<p>Test form</p>
<form id="form">
  <input type="text" placeholder="first input">
  <input type="text" placeholder="second input">
  <button id="innerButton" type="submit">Inner button</button>
</form>
<button id="outerButton">Outer button</button>

Answer 1

使用form <button> 上的属性将其链接到您的<form>通过id

<button id="outerButton" form="form" type="submit">Outer button</button>

参见https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-form