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

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-event 会阻止执行实际的按钮操作（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);
    });
});