title: Passing Search Input to Javascript Without Input Button
body: <p>I have the following html form that I'm trying to submit to javascript without using any buttons. Enter the query and press enter should complete the form submission.</p>
  
  <p>I get an error "TypeError: undefined is not an object (evaluating 'this.form.query')". If I remove 'this.form.query' from the onsubmit(), then the function gets called. What am I doing wrong? How am I supposed to pass the query to the JS function?</p>
  
  <pre><code>&lt;form onsubmit="searchWiki(this.form.query)"&gt;
  &lt;input type="search" placeholder="Search Wikipedia" name="query" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>My JS function is below</p>
  
  <pre><code>function searchWiki(data) {
  var script = document.createElement('script');
  console.log(data);
  script.src = '//en.wikipedia.org/w/api.php?action=opensearch&amp;format=json&amp;search=apple%20inc&amp;callback=wikiData';
  document.getElementsByTagName('head')[0].appendChild(script);
  };
  </code></pre>
  
  <p><strong>Update:</strong>
  Thanks to everyone's help. Below is my updated code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;form id="search"&gt;
      &lt;input type="search" placeholder="Search Wikipedia" name="query" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>function searchWiki(data) {
      let script = document.createElement('script');
      console.log(data);
      script.src = `//en.wikipedia.org/w/api.php?action=opensearch&amp;format=json&amp;search=${data}&amp;callback=wikiData`;
      document.getElementsByTagName('head')[0].appendChild(script);
  }
  
  document.getElementById('search').addEventListener('submit', function(e) {
      e.preventDefault();
      searchWiki(encodeURIComponent(this.query.value));
  })
  </code></pre>