当提交按钮上有点击事件时，表单不会被提交

Question

我有一个表单，其中有一个提交按钮上的点击事件侦听器。单击提交按钮时，将触发按钮上的事件单击事件侦听器，但不会提交表单。

这是我的代码：

<!-- HTML -->
<form action="/customer/create" method="post">
  <input type="text" name="email">
  <button type="submit" class="has-button-spinner">Create Customer</button>
</form>

<!-- JS -->
const buttons = document.querySelectorAll('.has-button-spinner');

buttons.forEach((button) => {
  button.addEventListener('click', (e) => {
    const target = e.currentTarget;

    target.classList.add('is-loading');
    target.setAttribute('disabled', true);
  });
});

Answer 1

当您禁用 <button> 时，您会阻止其操作 （提交表单） 发生。

不要监听按钮的 click 事件，而是监听表单的 submit 事件：

const forms = document.querySelectorAll('form');

forms.forEach((form) => {
  form.addEventListener('submit', (e) => {
    const target = form.querySelector('button.has-button-spinner');

    target.classList.add('is-loading');
    target.setAttribute('disabled', true);
  });
});

<form action="/customer/create" method="post">
  <input type="text" name="email">
  <button type="submit" class="has-button-spinner">Create Customer</button>
</form>

Answer 2

正如@Zenoo 所说，监听 onClick 事件会阻止实际的按钮操作 (submit) 被执行，因此您可以：

在处理程序中提交表单：

HTML:

<!-- add id to form -->
<form id="form_create_customer" action="/customer/create" method="post">
  <input type="text" name="email">
  <button type="submit" class="has-button-spinner">Create Customer</button>
</form>

JS:

const buttons = document.querySelectorAll('.has-button-spinner');

buttons.forEach((button) => {
    button.addEventListener('click', (e) => {
        const target = e.currentTarget;

        target.classList.add('is-loading');
        target.setAttribute('disabled', true);

        document.getElementById("form_create_customer").submit();
    });
});

更改处理程序以监听 `onSubmit` 而不是 `onClick`:

HTML:

<!-- add id to form -->
<form id="form_create_customer" action="/customer/create" method="post">
  <input type="text" name="email">
  <button type="submit" class="has-button-spinner">Create Customer</button>
</form>

JS:

const buttons = document.querySelectorAll('.has-button-spinner');

buttons.forEach(button => {
    button.parentNode.addEventListener('submit', e => {
        // we're not using the event data to avoid
        // having to find the button from the form
        // on each submit event
        button.classList.add('is-loading');
        button.setAttribute('disabled', true);
    });
});

当提交按钮上有点击事件时，表单不会被提交

Form doesn't get submitted when there's click event on submit button

html

javascript

forms

ecmascript-5

ecmascript-6

在处理程序中提交表单：

更改处理程序以监听 `onSubmit` 而不是 `onClick`:

当提交按钮上有点击事件时，表单不会被提交

Form doesn't get submitted when there's click event on submit button

html

javascript

forms

ecmascript-5

ecmascript-6

在处理程序中提交表单：

更改处理程序以监听 onSubmit 而不是 onClick:

更改处理程序以监听 `onSubmit` 而不是 `onClick`: