title: Content disappears immediately after form submitted and function runs
body: <p>I'm new to Javascript and HTML.</p>
  
  <p>I have the following form in HTML:</p>
  
  <pre><code>&lt;div id="form-select"&gt;
      &lt;form id="date_form" action="" METHOD="POST"&gt;
          &lt;datalist id="dates"&gt;
              &lt;option value="February 7"&gt;February 7&lt;/option&gt;
              &lt;option value="February 14"&gt;February 14&lt;/option&gt;
              &lt;option value="February 21"&gt;February 21&lt;/option&gt;
              &lt;option value="February 28"&gt;February 28&lt;/option&gt;
          &lt;/datalist&gt;
          &lt;input type="text" class="input" name="data" id="date" value="" list="dates" placeholder="pick a date"&gt;&lt;br&gt;
          &lt;input type="submit" name="submit" onClick="myFunction()"/&gt;
      &lt;/form&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Here's the javascript in a file called script.js. The js file is linked in the header as 'script type="text/javascript" src="script.js':</p>
  
  <pre><code>function myFunction(){
     var input = document.getElementById("date").value;
     if(input==="February 7"){
        document.getElementById('w1').innerHTML = "&lt;h2&gt; HEADING &lt;/h2&gt;;
     }
   };
  </code></pre>
  
  <p>When I fill out the form and hit submit, the javascript correctly executes the function, but the result (i.e. adding HEADING to the html) happens for a couple of milliseconds before disappearing and resetting to the original page before I had hit submit.</p>
  
  <p>How do I make it so that the insertion of HEADING remains permanent?</p>