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

使用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

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>

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

3 个答案: