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

Question

我对原生html表单有一个小问题。我想提交带有外部按钮的表单，正如您在附加的小提琴链接上看到的那样。但是，同时我需要防止生成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

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

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

请参阅https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-形成

Answer 2

您可以使用label元素作为外部按钮：

var formElem = document.querySelector('#form');
formElem.addEventListener('submit', (event) => {
event.preventDefault();
console.log('formElem', event.type);
})

#submit {
display: none;
}
label {
display: inline-block;
margin:1em 0; padding:0 1em;
line-height:1.5;
border: solid 1px #ddd;
border-radius: 4px;
background: #eee
}

<p>Test form</p>
<form id="form">
<input type="text" placeholder="first input">
<input type="text" placeholder="second input">
<input type="submit" id="submit">
</form>
<label for="submit">Outer button</label>

Answer 3

单击时，可以使外部按钮单击内部按钮。

#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>
<script>
var formElem = document.querySelector('#form');
var innerButtonElem = document.querySelector('#innerButton');
var outerButtonElem = document.querySelector('#outerButton');
innerButtonElem.addEventListener('click', (event) => {
	console.log('innerButton', event.type);
});
outerButtonElem.addEventListener('click', (event) => {
	console.log('outerButton', event.type);
innerButtonElem.click();
});
formElem.addEventListener('submit', (event) => {
	console.log('formElem', event.type);
event.preventDefault();
});
</script>