Redirecting to another HTML page doesn't work inside Javascript form submit event listener

Issue

Here is the JS code:

let form = document.querySelector("form");

form.addEventListener("submit", (e) => {
      const map_not_uploaded = document.getElementById("map").value == "";
      const bugs_not_uploaded = (document.getElementById("bug1").value == "") || (document.getElementById("bug2").value == "");

      if (map_not_uploaded) {
            alert("Must upload map file");
            e.preventDefault();
      }
      else if (bugs_not_uploaded) {
            alert("Must upload both bug files");
            e.preventDefault();
      }
      else {
            window.location.href = "new.html";
      }
});

`

After submitting the form, it checks correctly if the files were inputted,i.e. it displays the alerts. However, after correct inputs it doesnt't redirect to new.html.

Solution

Just put e.preventDefault() at the top of the function.

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const map_not_uploaded = document.getElementById("map").value == "";
  const bugs_not_uploaded = (document.getElementById("bug1").value == "") || (document.getElementById("bug2").value == "");

  if (map_not_uploaded) {
        alert("Must upload map file");
  }
  else if (bugs_not_uploaded) {
        alert("Must upload both bug files");
  }
  else {
        window.location.href = "new.html";
  }
  });

Answered By - dom1