title: Loading icon with CSS is always visible
body: <p>The loading icon is always showing. I need it to check the first JavaScript code and if that's true show a loading icon. What's wrong with my code? On the "onsubmit" part, have I done it wrong by just placing the 2 JavaScript behind eachother?</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>    function checkForm(form)
      {
       if(form.username.value == "") {
         alert("Error: gelieve je naam in te vullen!");
         form.username.focus();
        return false;
      }
      re = /^\w+$/;
      if(!re.test(form.username.value)) {
        alert("Error: je naam mag alleen letters,nummers, en underscores   bevatten!");
        form.username.focus();
        return false;
      }
  
      if(form.pwd1.value != "" &amp;&amp; form.pwd1.value == form.pwd2.value) {
        if(form.pwd1.value.length &lt; 8) {
          alert("Error: je wachtwoord moet minstens 8 tekens hebben!");
          form.pwd1.focus();
          return false;
        }
        if(form.pwd1.value == form.username.value) {
          alert("Error: je wachtwoord mag niet hetzelfde zijn als je naam!");
          form.pwd1.focus();
          return false;
        }
        re = /[0-9]/;
        if(!re.test(form.pwd1.value)) {
          alert("Error: je wachtwoord moet minstens 1 cijfer bevatten (0-9)!");
          form.pwd1.focus();
          return false;
        }
        re = /[a-z]/;
        if(!re.test(form.pwd1.value)) {
          alert("Error: je wachtwoord moet minstens 1 kleine letter bevatten (a-z)!");
          form.pwd1.focus();
          return false;
        }
        re = /[A-Z]/;
        if(!re.test(form.pwd1.value)) {
          alert("Error: je wachtwoord moet minstens 1 grote letter bevatten (A-Z)!");
          form.pwd1.focus();
          return false;
        }
      } else {
        alert("Error: je ingevulde wachtwoorden zijn niet hetzelfde!");
        form.pwd1.focus();
        return false;
      }
  
      ;
      return true;
      }
      function showHide() {
      var div = document.getElementById("hidden_div");
      if (div.style.display == 'none') {
      div.style.display = '';
      }
      else {
      div.style.display = 'none';
      return false;
      }
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;form name="form" method="POST" action="\JocanasNL.php" onsubmit="return checkForm(this); showHide(); return true;"&gt;    
       Voornaam.Achternaam:*&lt;br&gt;&lt;input type="text" name="username" size="19" required&gt;&lt;br&gt;
      &lt;p&gt;Dit zal ook jouw inlognaam worden!&lt;/p&gt;&lt;br&gt;
      Geslacht:&lt;br&gt;&lt;input type="radio" name="sex" value="Man"&gt;Man&lt;br&gt;
      &lt;input type="radio" name="sex" value="Vrouw"&gt;Vrouw&lt;br&gt;&lt;br&gt;
      Emailadres:*&lt;br&gt;&lt;input type="email" name="email" size="19" required&gt;&lt;br&gt;&lt;br&gt;
      Wachtwoord:*&lt;br&gt;&lt;input rows="9" type="password" name="pwd1" size="19" required&gt;&lt;br&gt;&lt;br&gt;
      Wachtwoord bevestigen:*&lt;br&gt;&lt;input rows="9" type="password" name="pwd2" size="19" required&gt;&lt;br&gt;&lt;br&gt;
      Ideeën voor nieuwe films, TV-series games of functies:&lt;br&gt;&lt;textarea class="input" name="comment" rows="5" cols="30"&gt;&lt;/textarea&gt;&lt;br&gt;&lt;br&gt;
      &lt;input type="submit" value="Aanvragen" name="submit"&gt;
      &lt;input type="reset" value="Herstellen"&gt;
      &lt;/form&gt;
      &lt;div class="spinner"&gt;
      &lt;div class="bounce1"&gt;&lt;/div&gt;
      &lt;div class="bounce2"&gt;&lt;/div&gt;
      &lt;div class="bounce3"&gt;&lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>