I am trying to run three different functions when the submit button is clicked before my form gets submitted;

Below are the functions I am trying to run with my javascript codes;

Click Submit button==>Shows An Alert==>Take Action On Alert to==>Show Loading Bar==>Then, Submit The Form and Redirect to the next url.

1. Show An Alert (WORKING).

2. Show Loading Bar (WORKING).

3. Submit and Redirect (NOT WORKING).

See my sample code below

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

CodePudding user response：

You don't need to put the fetch() call inside another load and submit event listeners. You're already inside the submit event listener. Just call fetch() directly.

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");
    }
  });
});