title: document.getElementById('textbox').focus() not working after submit form
body: <p>I am trying to implement a simple form, and I am trying to set the focus on the first textbox in the form after submit, it's just not working. I could not use the code snippet on this site because I am using localStorage, and it didn't allow me to use it)</p>
  
  <p>Here's my code on Codepen: <a href="http://codepen.io/anon/pen/ZemVpz" rel="nofollow noreferrer">http://codepen.io/anon/pen/ZemVpz</a></p>
  
  <p>Here's how my HTML looks like for a quick reference: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById('formBookmark').addEventListener('submit', addBookmark);
  
  function addBookmark(e) {
      var siteName = document.getElementById('txtSiteName').value;
      var siteUrl = document.getElementById('txtSiteUrl').value;
      if (!validate(siteName, siteUrl)) {
          alert("Please fill the blank fields");
          return;
      }
  
      var newBookmark = {
          siteName: siteName,
          siteUrl: siteUrl
      }
  
      var bookmarks = getlocalBookmarks() || [];
  
      bookmarks.push(newBookmark);
      localStorage.setItem('tf-bookmarks',JSON.stringify(bookmarks));
      //trying to set focus here
      document.getElementById(formBookmark).reset();
      document.getElementById("txtSiteName").focus();
      
      fetchBookmarks();
      e.preventDefault();
     
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  
  &lt;form id="formBookmark"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="txtSiteName"&gt;Site Name:&lt;/label&gt;
                      &lt;input type="text" name="txtSiteName" id="txtSiteName" class="form-control" placeholder="Google" /&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="txtSiteUrl"&gt;Site Url:&lt;/label&gt;
                      &lt;input type="text" name="txtSiteUrl" id="txtSiteUrl" class="form-control" placeholder="http://google.com"/&gt;
                  &lt;/div&gt;
                  &lt;button class="btn btn-success" id="btnAddLink" type="submit"&gt;Add Bookmark&lt;/button&gt;
              &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I can use body onload event to do this, but what if I have more than one form on the page. Why that line of code to set focus through JS isn't workin?</p>
  
  <p>Thank you. </p>