在加载动画和提交表单之前显示警报

Question

我使用 onsubmit 函数在表单提交前显示加载动画。

如何在加载动画触发之前和表单提交之前先显示警报？

下面是显示动画的示例代码。

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>

在加载动画和提交表单之前显示警报

Show Alert Before Loading Animation and Form Submission

javascript

alert