title: Button in form event always returning false
body: <p>So I have a form, a id and password and a button for submit, when the user fills it out and submit with the button, there is a function checking if id matches password. but it always return false in the function. why? Here is the code:</p>
  
  <pre><code>    &lt;form&gt;
          &lt;input type="text" name="u" placeholder="ID" required="required" /&gt;
          &lt;input type="password" name="p" placeholder="Password" required="required" /&gt;
          &lt;button id="but" type="submit" class="btn btn-primary btn-block btn-large"&gt;Enter Workspace&lt;/button&gt;
      &lt;/form&gt;
  
      $(document).ready(function(){
          $('#but').click(function(e) {
              e.preventDefault(); 
              console.log("in function");
              var ID=$('input[name=u]').val();
              var password = $('input[name=p]').val();
              if(personnel[ID]){
                  if(personnel[ID].password === password){
                      window.open("Workspace/index.html");
                  }
                  else{
                      alert("Incorrect ID Or Password")
                  }
  
              }
              else{
                  alert("Incorrect ID Or Password")
              }
          });
      });
  </code></pre>
  
  <p>var personnel is in another script, </p>
  
  <pre><code>&lt;script src="L/scripts.js"&gt;&lt;/script&gt;
  </code></pre>