title: Open new HTML page via javascript and pass parameters
body: <p>I am completely new to javascript and web development and have a question. I have two HTML files, one includes a search field and a search button, the other one should (later) include the search results. If a user clicks the search button, I want to open the other HTML file and pass the search term. </p>
  
  <p>If I do this with my current code, it just passes [object%20HTMLInputElement] and not the search term. I am now stuck for several hours, even similar stackoverflow posts could not help me. This is my code of the search-field HTML:</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;!-- Die drei oberen meta tags *müssen* zuerst im Head-Tag angegeben werden; alle anderen Tags können anschließend eingefügt werden --&gt;
      &lt;title&gt;Next Event&lt;/title&gt;
      &lt;!-- Bootstrap --&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  
  &lt;script type="text/javascript" src="http://api.eventful.com/js/api"&gt;&lt;/script&gt;
  
  &lt;!-- jQuery (notwendig für Bootstraps JavaScript plugins) --&gt;
  &lt;script src="js/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
  &lt;!-- Alle kompilierten plugins einbeziehen --&gt;
  &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
      function search() {
          var where   = document.getElementById("where");
          window.location = "SearchResults.html?city=" + where;
      }
  
  &lt;/script&gt;
  
  &lt;body&gt;
      &lt;div class="container-fluid"&gt;
          &lt;h1&gt;Next Event&lt;/h1&gt;
  
          &lt;div class="form-group"&gt;
              &lt;label for="usr"&gt;Ort&lt;/label&gt;
              &lt;input type="text" class="form-control" id="where" placeholder="Bitte geben Sie eine Stadt ein."&gt;
          &lt;/div&gt;
  
          &lt;button onclick="search()" type="button" class="btn btn-primary"&gt;Search&lt;/button&gt; &lt;p&gt;&lt;br&gt;&lt;/p&gt;
  
          &lt;p id="output"/&gt;
          &lt;p&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;/p&gt;
          &lt;p id="output2"/&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>This is the search results HTML:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;!-- Die drei oberen meta tags *müssen* zuerst im Head-Tag angegeben werden; alle anderen Tags können anschließend eingefügt werden --&gt;
      &lt;title&gt;Next Event&lt;/title&gt;
      &lt;!-- Bootstrap --&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  
  &lt;script type="text/javascript" src="http://api.eventful.com/js/api"&gt;&lt;/script&gt;
  
  &lt;!-- jQuery (notwendig für Bootstraps JavaScript plugins) --&gt;
  &lt;script src="js/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
  &lt;!-- Alle kompilierten plugins einbeziehen --&gt;
  &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;body&gt;
      &lt;div class="form-group"&gt;
          &lt;h1 id="header"&gt;&lt;/h1&gt;
          &lt;script type="text/javascript"&gt;
              document.getElementById('header').innerHTML = "Events in " + window.location.search;
          &lt;/script&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html
  </code></pre>
  
  <blockquote>
    <p></p>
  </blockquote>
  
  <p>I would be very thankful for any help.</p>