title: I don't want my page or console to refresh! Javascript form handling
body: <pre><code>&lt;form id="myForm"&gt;
      &lt;input type="text" value="Try me!"&gt;
      &lt;button type="submit"&gt;Go&lt;/button&gt;
  &lt;/form&gt;
  &lt;script type="text/javascript"&gt;
      function init(){
          var form = document.getElementById("myForm");
          form.addEventListener("submit", process, false);
      };
      function process(){
          console.log("Yikes!");
          return false;
      };
      document.addEventListener("DOMContentLoaded", init, false);
  &lt;/script&gt;
  </code></pre>
  
  <p>I have searched, really. I found something that works, but I've been told to use eventlisteners instead of "onsubmit" etc. I'm assuming the default behaviour on form submission is to reload the page, but I thought the return false would stop this. The code I found that works is:</p>
  
  <pre><code>window.onload=function() {
      document.getElementById('my-form').onsubmit=function() {
      /* do what you want with the form */
  
      // Should be triggered on form submit
      console.log("Yipee!");
      // You must return false to prevent the default form behavior
      return false;
    }
  }
  </code></pre>
  
  <p>Any help on my learning journey much appreciated.</p>