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

Question

I am trying to run three different functions when the submit button is clicked before my form gets submitted but I noticed I wasn't getting the submit part of the code.

Kindly see my sample code below to better understand my problem.

Any help to correct my mistakes will be appreciated.

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

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