../path 不是重定向页面

Question

I'm trying to the page to search.html . Depending on what page it is, search.html is either located in the same directory or a directory above. I can't figure out why it's not redirecting.

Here is HTML code:

  <form  class="search" onsubmit="searchSite()">
    <input id="search" title="Seach this site" type="text" name="search"
      placeholder="Search this site..">
  </form>

Here is JS code:

function searchSite() {
  var search = document.getElementById("search").value.toLowerCase().split(" ");
  searchArticles(search);
  displayResults();
}

function displayResults() {
  if (window.location.href.indexOf("humans") !== -1 
      || window.location.href.indexOf("other")){ 
    window.location.href = "../search.html";
    console.log(window.location.href);}
  else
    window.location.href = "search.html";
}

Before searching the URL is: file:///C:Desktop/comp266/unit5/public_html/other/other.html

After searching the URL is: file:///C:Desktop/comp266/unit5/public_html/other/other.html ?search=good

But I want the URL to be: file:///C:Desktop/comp266/unit5/public_html/search.html

Answer 1

This is because form has its default behavior that redirect site to form's action URL or query URL with query params as you see.
You can prevent this default behavior by return false on submit listener:

  <form  class="search" onsubmit="return searchSite()"> <!-- ADD THIS -->
    <input id="search" title="Seach this site" type="text" name="search"
      placeholder="Search this site..">
  </form>

function searchSite() {
  var search = document.getElementById("search").value.toLowerCase().split(" ");
  searchArticles(search);
  displayResults();

  // ADD THIS
  return false;
}

A more proper way is do preventDefault in case there may be bug occurs before return false:

<form  class="search" onsubmit="return searchSite(event)"> <!-- ADD THIS -->
    <input id="search" title="Seach this site" type="text" name="search"
      placeholder="Search this site..">
  </form>

function searchSite(event) {
  // ADD THIS
  event.preventDefault();

  var search = document.getElementById("search").value.toLowerCase().split(" ");
  searchArticles(search);
  displayResults();

  // ADD THIS
  return false;
}