title: Why isn't my JS pulling the value from the form properly?
body: <p>HTML in question is pretty simple:</p>
  
  <p><code>&lt;form&gt;
      &lt;input type="text" name="locSearch" id="locSearch" /&gt;
      &lt;button id="locSearchBtn"&gt;&lt;i class="fa fa-search" id="search-icon"&gt;&lt;/i&gt;&lt;/button&gt;
  &lt;/form&gt;</code></p>
  
  <p>js:</p>
  
  <pre><code>$(document).ready(function() {
  getsWeather('seattle, wa', 'f');
  $("#locSearchBtn").click(function() {
      getsWeather(document.getElementById('locSearch').value, 'f');
  });
  </code></pre>
  
  <p>When I submit the form (either by pressing enter or by clicking the submit icon, the page reloads but with the default setting (i.e with 'Seattle, wa as the default argument for the getsWeather function). I need it to pull whatever is in the input box and use that as the argument in the getsWeather function but that currently isn't working.</p>
  
  <p>Any ideas? Let me know if you need more of the code to understand it</p>