title: Calling Javascript function when button clicked
body: <p>I have a JS function that I want to execute when a button is clicked. It's basically a search box, which when the button is clicked, will take the inputted text (a postcode) from the input field, and pass it to a PHP script which will convert it to a lat/long using an API, and then output a pin on an embedded Google map. I have done all the PHP/API/Map stuff, and it all works a treat with a hard-coded postcode, but I now need the postcode to be pulled from the search box.</p>
  
  <p>See code below:</p>
  
  <p><b>Javascript:</b></p>
  
  <pre><code>var post_search = document.getElementById('post_search');
  function useValue() {
      var postcode = post_search.value;
      // use it
      alert(postcode); // just to show the new value &amp; ensure this portion is working
  }
  post_search.onchange = useValue;  
  post_search.onblur = useValue;
  </code></pre>
  
  <p><b>HTML:</b></p>
  
  <pre><code>    &lt;div id="post_search_container"&gt;
          &lt;input type="text" id="post_search" name="item" placeholder="Search.."/&gt;
          &lt;input type="button" id="nested_search" value="Search.."/&gt;
          &lt;script type="text/javascript" src="js/post_search.js"&gt;&lt;/script&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I have read that I can use another "getElementByID" for the button which will then execute the code, but cannot figure out how it works. I have also read that an OnClick event is required, but again, cannot figure that out either. It is also worth mentioning that I do have jQuery (v2.1.3), so if required, I can implement a jQuery method of achieving the above.</p>
  
  <p>Any help is massively appreciated, Thanks in advance.</p>