在提交表單之前單擊提交按鈕時，我正在嘗試運行三個不同的功能；
以下是我嘗試使用我的 javascript 代碼運行的功能；
單擊提交按鈕==>顯示警報==> 對警報采取措施 ==>顯示加載欄==>然后，提交表單并重定向到下一個 url。
顯示警報（作業中）。
顯示加載欄（作業）。
提交和重定向（不作業）。
請參閱下面的示例代碼
/*THIS CODE SHOWS THE ALERT (WORKING)*/
document.querySelector('#theForm').addEventListener('submit', function(e) {
var form = confirm;
e.preventDefault();
swal({
title: "Please Confirm!",
text: "Are you sure you want to continue?",
icon: "warning",
buttons: [
'No, Cancle it!',
'Yes, I accept!'
],
dangerMode: true,
}).then(function(isConfirm) {
if (isConfirm) {
/*THIS CODE SHOWS THE LOADING ICON (WORKING)*/
var div = document.createElement("div");
var img = document.createElement("img");
// img.src = "";
div.innerHTML = "<span style='color: white; text-transform: uppercase; letter-spacing: 5px; font-size: 15px;'>SAVING</span><br/> <img src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoTaQ3jZMSSsQvJRcN7qvrEzdFbVCl6XiotnTroAox6-cjYrnJqtsFfZ3k94E5CULApvvl8z3EE_HAhqgAofLd5am4KvpNbEJZTL6-S6N24DjCxW_fBBGRguumQg_bSQVlQWDIcd0BFjXq8B0XAkLgX2qVCJ1xZCFjIIOKqjab8EbAe_aFgm94URoA/s1600/ezgif.com-gif-maker (3).gif\" width=\"226px\" height=\"22px\">";
div.style.cssText =
"position: fixed; top: 50%; left: 50%; z-index: 5000; width: auto; text-align: center; background: #b51200; border: 2px solid #b51200; border-radius: 7px; transform: translate(-50%,-50%)";
// div.appendChild(img);
document.body.appendChild(div);
event.preventDefault();
// These 2 lines cancel form submission, so only use if needed.
//window.event.cancelBubble = true;
//e.stopPropagation();
/*THIS CODE SUBMITS THE FORM AND THEN REDIRECTS TO THE NEXT URL (NOTHING HAPPENS AT THIS STAGE)*/
window.addEventListener("load", function() {
const form = document.getElementById('submitForm');
form.addEventListener("submit", function(e) {
e.preventDefault();
const data = new FormData(form);
const action = e.target.action;
fetch(action, {
method: 'POST',
body: data,
})
.then(() => {
window.location.href = "https://www.google.com";
})
});
});
} else {
swal("Cancelled", "You canceled submission :)", "error");
}
});
});<link data-require="sweet-alert@*" data-semver="0.4.2" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" />
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<form action='' method='POST' runat="server" id="theForm" onsubmit="return ShowLoading()">
<input name='Name' placeholder='Full Name' required='' type='text' />
<button href='/' type='submit' id="submitForm">Submit</button>
</form>uj5u.com熱心網友回復：
您不需要將fetch()呼叫放在另一個load和submit事件偵聽器中。您已經在submit事件偵聽器中。直接打電話就fetch()行了。
document.querySelector('#theForm').addEventListener('submit', function(e) {
var form = confirm;
e.preventDefault();
swal({
title: "Please Confirm!",
text: "Are you sure you want to continue?",
icon: "warning",
buttons: [
'No, Cancle it!',
'Yes, I accept!'
],
dangerMode: true,
}).then(function(isConfirm) {
if (isConfirm) {
/*THIS CODE SHOWS THE LOADING ICON (WORKING)*/
var div = document.createElement("div");
var img = document.createElement("img");
// img.src = "";
div.innerHTML = "<span style='color: white; text-transform: uppercase; letter-spacing: 5px; font-size: 15px;'>SAVING</span><br/> <img src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoTaQ3jZMSSsQvJRcN7qvrEzdFbVCl6XiotnTroAox6-cjYrnJqtsFfZ3k94E5CULApvvl8z3EE_HAhqgAofLd5am4KvpNbEJZTL6-S6N24DjCxW_fBBGRguumQg_bSQVlQWDIcd0BFjXq8B0XAkLgX2qVCJ1xZCFjIIOKqjab8EbAe_aFgm94URoA/s1600/ezgif.com-gif-maker (3).gif\" width=\"226px\" height=\"22px\">";
div.style.cssText =
"position: fixed; top: 50%; left: 50%; z-index: 5000; width: auto; text-align: center; background: #b51200; border: 2px solid #b51200; border-radius: 7px; transform: translate(-50%,-50%)";
// div.appendChild(img);
document.body.appendChild(div);
event.preventDefault();
// These 2 lines cancel form submission, so only use if needed.
//window.event.cancelBubble = true;
//e.stopPropagation();
/*THIS CODE SUBMITS THE FORM AND THEN REDIRECTS TO THE NEXT URL (NOTHING HAPPENS AT THIS STAGE)*/
const data = new FormData(e.target);
const action = e.target.action;
fetch(action, {
method: 'POST',
body: data,
})
.then(() => {
window.location.href = "https://www.google.com";
})
} else {
swal("Cancelled", "You canceled submission :)", "error");
}
});
});轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/480946.html
標籤：javascript 形式 提交时