如何在 Javascript 中使用提交功能？

Question

哎哟，

我对 JS 中的函数有点吃力。 这个想法是，在用户点击提交按钮后，它会检查是否所有必填字段都已填写，如果是，它将触发加载动画。 加载动画应该是发送表单和重定向到成功页面的同时的状态指示器。

我尝试在表单 HTML 标记中使用 onsubmit 函数，但这不起作用。重要的是，如果填写了必填字段，它就会发生。

谢谢

JS

const submit_btn = document.querySelector('.submit-btn')

function loading() {
  this.innerHTML = "<div class='loader'></div>"
}

HTML

<form
  onsubmit="loading()" 
  action="https://formsubmit.co/2007080c2cf8bd2ebb68506e7aa98c5f"
  method="POST"
  enctype="multipart/form-data"
>

我尝试在表单 HTML 标记中使用 onsubmit 函数，但这不起作用。

Answer 1

关于验证:

您可以使用Constrained Validation API（参见MDN）来检查是否所有字段都已填写。通常你想使用它后用户提交了<form> 但是前表单被发送到服务器。

这可以通过在submitting 表单上调用的事件处理程序中使用它来实现。

关于事件处理：

要实现上述机制，您要做的是通过.addEventListener() 而不是onsubmit 属性为表单的submit 事件添加一个事件侦听器。这样，您将收到一个 event 对象作为事件处理函数的参数，您可以使用它来阻止表单提交。

例子：

const myForm = document.querySelector('form'); // or '#myform', etc...

// define the event handler function
function onFormSubmission(event) {
  const fields = Array.from(event.target.elements);
  const allValid = fields.every(field => field.reportValidity()); 
  if (!allValid) {
    event.preventDefault(); // stop form submission
    return;
  }
  event.target.innerHTML = '<div class="loading"></div>';
}

// add an event listener that fires on submission
myForm.addEventListener('submit', onFormSubmission);

<form id="myform" action="path/to/backend/script.php" method="POST" enctype="multipart/formdata" novalidate>
  <input type="text" name="foo" placeholder="I am required!" required>
  <hr>
  <button type="submit">Submit form</button>
</form>

编辑

抱歉，我错过了添加显示加载信息/元素的部分。添加（尽管您不会真正看到它，因为如果填写了所有必填字段，将提交表单，导致页面刷新。您需要类似 XHR 或类似的东西，但这不是问题的范围）。

Answer 2

首先通过查询选择器获得提交按钮的控制权

submit_btn = document.querySelector('.submit-btn');

那么您只需要将事件侦听器添加到该提交按钮

submit_btn.addEventListener('submit', (event) => {
  event.target.innerHtml = "<div class='loader'></div>"
});