title: Page reloads even after button click
body: <p>I have 3 html files - start.html, loginPage.html and dashboard.html. When the login button is clicked, it should load dashboard but I am unable to access the button.</p>
  
  <p>Start.html</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Security-Policy"&gt;
      &lt;meta name="format-detection" content="telephone=no"&gt;
      &lt;meta name="msapplication-tap-highlight" content="no"&gt;
      &lt;meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"&gt;
      &lt;title&gt;Amazon App&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body onload="init()"&gt;
      &lt;br&gt;&lt;br&gt;
  
      &lt;div id='content'&gt;
          &lt;center&gt;&lt;img src='img/splashlogo.png'/&gt;&lt;center&gt;
      &lt;/div&gt;
  
      &lt;script src="cordova.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.mobile.min.js"&gt;&lt;/script&gt;
      &lt;script src="require.js"&gt;&lt;/script&gt;
      &lt;script src="aws-sdk-2.1.34.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/check.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>loginPage.html</p>
  
  <pre><code>&lt;link rel="stylesheet" href="css/index.css"/&gt;
  &lt;SCRIPT TYPE="text/javascript"&gt;
  function setValues(){
      $("#accessKey").val('MY-ACCESS-KEY');
      $("#secretKey").val('MY-SECRET-KEY');
  }
  &lt;/SCRIPT&gt;
  
   &lt;div data-role="page" id="start" data-enhance="false" style = 'background: url(../img/BG.png);'&gt;
  &lt;div data-role = "content"&gt;
      &lt;br&gt;&lt;br&gt;
      &lt;div align="right"&gt;
          &lt;img src="./img/help-icon.png" onClick= "setValues()"/&gt;
      &lt;/div&gt;
     &lt;div align = "center"&gt;
     &lt;img src="./img/Logo login screen.png" height="200" width="170"/&gt;
      &lt;/div&gt;
  
      &lt;br&gt;&lt;br&gt;
      &lt;form id="loginForm" align = "center" data-ajax="false"&gt;
          &lt;div id="user" align = "center"&gt;
              &lt;input class="amazeFont" type="text" id = "accessKey" Placeholder="Access Key (20 characters)" size="30" maxlength="128" tabindex="1" autocomplete="on" autocorrect="off" autocapitalize="off" data-validation="[NOTEMPTY]"/&gt;
          &lt;/div&gt;
          &lt;br&gt;&lt;br&gt;
          &lt;div id = "pass" align = "center"&gt;
              &lt;input class="amazeFont" type="password" id = "secretKey" Placeholder = "Secret Key (40 characters)" size="30" maxlength="1024" autocomplete="on" tabindex="2" data-validation="[NOTEMPTY]"/&gt;
          &lt;/div&gt;
          &lt;br&gt;&lt;br&gt;
          &lt;center&gt;&lt;button type = "submit" id="submitButton" style='width: 80%; height: 40px; background-color: #f15a29; font-weight: bold; color: white; cursor: pointer;'&gt;Login&lt;/button&gt;&lt;/center&gt;
      &lt;/form&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  
   &lt;script src="cordova.js"&gt;&lt;/script&gt;
   &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
   &lt;script src="js/jquery.mobile.min.js"&gt;&lt;/script&gt;
   &lt;script src="require.js"&gt;&lt;/script&gt;
   &lt;script src="aws-sdk-2.1.34.min.js"&gt;&lt;/script&gt;
   &lt;script src="js/fun.js"&gt;&lt;/script&gt;
   &lt;script src="js/check.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>function init(){
     document.addEventListener("deviceReady", onDeviceReady,false);
  }
  
  function onDeviceReady(){
       window.location = 'loginPage.html';
       document.getElementById('submitButton').addEventListener("click", startApp,false); 
  
  }
  
  function startApp(){
      alert('switching page');
      window.location= 'dashboard.html';
  }
  </code></pre>
  
  <p>The login page does not switch over to the dashboard page.It reloads. The button click is not caught. I want to make the pages slide.</p>
  
  <p><strong>EDITED:</strong></p>
  
  <p>the updated js:</p>
  
  <pre><code>function init(){
     document.addEventListener("deviceReady", onDeviceReady,false);
   }
  
   function onDeviceReady(){
       window.location = 'loginPage.html';
   }
  </code></pre>
  
  <p>Created a second js for loginPage.html and added it to the body of loginPage.html</p>
  
  <pre><code>function init(){
      document.addEventListener('deviceReady', onDeviceReady, false);
   } 
  
  function onDeviceReady(){
     document.getElementById('submitButton').addEventListener("click", startApp,false);
  }
  
  function startApp(){
  //alert('switching page');
     window.location= 'dashboard.html';
  }
  </code></pre>
  
  <p>The dashboard.html is not being called</p>