title: Form value is null in chrome extension
body: <p>JS newbie here. I have searched all over stackoverflow before posting this question, please comment on the question if it is a duplicate and need to be removed. </p>
  
  <p>I'm creating a form in google chrome extension which takes an input and logs it in the console when the submit button is pressed.</p>
  
  <p>I'm able to fetch the element(by Id), but there is no value in it even after I'm clicking the submit button after entering the zip code. Here is the code:</p>
  
  <pre><code>document.addEventListener('DOMContentLoaded', function() {
      var zipCode = document.getElementById("zipCode");
  
      console.log("Zip Code is: " + zipCode.id);
      console.log("Zip Code value: " + zipCode.value);
  }, false);
  
  
  &lt;body style="width:320px;height:580px;"&gt;
      &lt;form action="/main.html" style="position: center; text-align: left; padding-left: 20px"&gt;
          &lt;h3&gt;Zip Code&lt;/h3&gt;
          &lt;input type="text" id="zipCode" align="left" size="8" style="padding-left: 0%; padding-bottom: 10px;font-family: 'Open Sans'"&gt;
          &lt;input type="submit" id="button" value="  Tap" style="font-family: 'Open Sans'" name="Submitted zip code"&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The console output is:</p>
  
  <pre><code>Zip Code is: zipCode
  Zip Code value:
  </code></pre>