title: Login validation function
body: <p>I have been trying to get this to work for a while now. I cannot connect the login function to the form. </p>
  
  <p>I have tried onsubmit on both the form tag and the button input tag, i have tried onclick but it does not get the code from js function.</p>
  
  <p>index1.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;Google maps&lt;/title&gt;
      &lt;meta name="viewport" content="initial-scale=1.0"&gt;
      &lt;meta charset="utf-8"&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"&gt;&lt;/script&gt;
      &lt;!--&lt;link rel="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"&gt;--&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"&gt;
  
      &lt;script src="util.js"&gt;&lt;/script&gt;
      &lt;script src="JavaScript.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;style&gt;
  
          #container  {
              width: 1200px;
          }
  
          #map {
              width: 80%;
              min-height: 600px;
              /*float: right;*/
              margin-top: 15px;
              margin-left: auto;
              margin-right: auto;
          }
  
          #img {
              width: 150px;
              height: 150px;
              float: left;
              margin-top: auto;
  
          }
  
          /*sökruta*/
          #searchBox {
              background-color: #ffffff;
              padding: 5px;
              font-family: 'Roboto','sans-serif';
              margin-bottom: 10px;
              float: top;
          }
  
          /*
          html, body {
              height: 100%;
              margin: 0;
              padding: 0;
          }
          */
  
          .search-form .form-group {
              float: right !important;
              transition: all 0.35s, border-radius 0s;
              width: 32px;
              height: 32px;
              background-color: #fff;
              box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
              border-radius: 25px;
              border: 1px solid #ccc;
          }
          .search-form .form-group input.form-control {
              padding-right: 20px;
              border: 0 none;
              background: transparent;
              box-shadow: none;
              display:block;
          }
          .search-form .form-group input.form-control::-webkit-input-placeholder {
              display: none;
          }
          .search-form .form-group input.form-control:-moz-placeholder {
              /* Firefox 18- */
              display: none;
          }
          .search-form .form-group input.form-control::-moz-placeholder {
              /* Firefox 19+ */
              display: none;
          }
          .search-form .form-group input.form-control:-ms-input-placeholder {
              display: none;
          }
          .search-form .form-group:hover,
          .search-form .form-group.hover {
              width: 100%;
              border-radius: 4px 25px 25px 4px;
          }
          .search-form .form-group span.form-control-feedback {
              position: absolute;
              top: -1px;
              right: -2px;
              z-index: 2;
              display: block;
              width: 34px;
              height: 34px;
              line-height: 34px;
              text-align: center;
              color: #3596e0;
              left: initial;
              font-size: 14px;
          }
  
          .form-group {
              max-width: 300px;
              margin-right: auto;
              margin-left: auto;
          }
  
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body id="container"&gt;
      &lt;img id="img" src="http://www2.math.su.se/icsim/images/sterik.jpg" alt="Stockholm"/&gt;
      &lt;div class="row"&gt;
          &lt;br&gt;
          &lt;div class="col-md-4 col-md-offset-3"&gt;
              &lt;form action="" class="search-form"&gt;
                  &lt;div class="form-group has-feedback"&gt;
                      &lt;label id="Search" class="sr-only"&gt;Search&lt;/label&gt;
                      &lt;input type="text" class="form-control" name="search" id="searchField" placeholder="Sök"&gt;
                      &lt;span class="glyphicon glyphicon-search form-control-feedback"&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;form id="loginForm" name="loginForm" method="POST"&gt;
                  &lt;label for="user"&gt;Användarnamn: &lt;/label&gt;
                  &lt;br&gt;
                  &lt;input class="form-control" type="text" id="user" name="user" required&gt;
                  &lt;br&gt;
                  &lt;label for="password"&gt;Lösenord: &lt;/label&gt;
                  &lt;br&gt;
                  &lt;input class="form-control" type="password" id="password" name="passwords" required&gt;
                  &lt;br&gt;
                  &lt;br&gt; 
                  &lt;input class="form-control" type="submit" id="login" value="Logga in" onclick="login()"&gt;
              &lt;/form&gt;
          &lt;/div&gt;
  
          &lt;div id="map"&gt;
  
          &lt;/div&gt;
  
          &lt;script async defer
                  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDNPkC40KP9lMKHUsJW7q403qnwRqYkTno&amp;callback=initMap"&gt;
          &lt;/script&gt;   
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>JavaScript.js</p>
  
  <pre><code>function login() {
  //spara username och password i tvÃƒÂ¥ varibler med samma namn frÃƒÂ¥n formet.
  var username = document.getElementById("user").value;
  var password = document.getElementById("password").value;
  
  if(username === "admin"
     &amp;&amp; password === "123" )
  {
      alert( "validation succeeded" );
      location.href="adminView.php";
  }
  else
  {
      alert( "validation failed" );
      location.href="index1.html";
  }
  }
  </code></pre>