在加載 Animation 和表單提交之前顯示警報

Question

我使用onsubmit function 在提交表單之前顯示加載 animation。

如何在加載 animation 觸發器之前和提交表單之前先顯示警報？

下面是顯示 animation 的示例代碼。

 function ShowLoading() { 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%20%283%29.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(); }

 <form action='' method='POST' runat="server" id="theForm" onsubmit="ShowLoading()"> <input name='Name' placeholder='Full Name' required='' type='text'/> <button href='/' type='submit' id="submitForm">Submit</button> </form>

以下是我的解決方案（不工作）。

 function ShowLoading() { var div = document.createElement("div"); var img = document.createElement("img"); alert("You are about to submit this form"); .then((value) => { 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%20%283%29.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(); }

 <form action='' method='POST' runat="server" id="theForm" onsubmit="ShowLoading()"> <input name='Name' placeholder='Full Name' required='' type='text'/> <button href='/' type='submit' id="submitForm">Submit</button> </form>

Answer 1

檢查這個

 function ShowLoading() { let confirmAction = confirm("Are you sure to execute this action?"); if (confirmAction) { 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%20%283%29.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(); } else { alert("Action canceled"); } return false; }

 <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>