阿喲，
我對 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 函式，但這不起作用。
uj5u.com熱心網友回復：
關于驗證：
您可以使用Constrained Validation API（參見MDN）檢查是否所有欄位都已填寫。通常您希望在用戶提交之后<form>但在將表單發送到服務器之前使用它。
submit這可以通過在呼叫表單的事件處理程式中使用它來實作。
關于事件處理：
要實作上述機制，您要做的是將事件偵聽器添加到submit表單的事件中，.addEventListener()而不是onsubmit屬性。這樣您將收到一個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 ></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 或類似的東西，但這不是問題的范圍）。
uj5u.com熱心網友回復：
首先通過查詢選擇器獲取提交按鈕的控制元件
submit_btn = document.querySelector('.submit-btn');
那么您只需要將事件偵聽器添加到該提交按鈕
submit_btn.addEventListener('submit', (event) => {
event.target.innerHtml = "<div class='loader'></div>"
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/534975.html
上一篇：如何以角度獲取所選按鈕的值