是否可以在一个脚本标签中执行多个 javascript ？

Question

我正在尝试运行在提交表单之前单击提交按钮时的三种不同功能，但我注意到我没有获得代码的提交部分。

请查看下面的示例代码以更好地理解我的问题。

如能帮助纠正我的错误，我们将不胜感激。

请参阅下面的示例代码

/*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%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();

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

Answer 1

您不需要将 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%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();

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

是否可以在一个脚本标签中执行多个 javascript ？

Is it possible to execute more than one javascript in one script tag?

javascript

forms

onsubmit