I am working on a html project, which will eventually package by Phonegap. So I am trying to encode the data from html form to JSON format, then use ajax send to a php file resides on server, and receive the response to do something else.

Now I use <a href='login.html'> in my index.html to open the login page. In my login page, I have this

<script>
        $(document).ready(function(e) {                
            $('#loginform').submit(function(){
                var jData = { "email": $('#emailLogin').val(), "password": $('#Password').val()};

                $.ajax({                                      
                  url: 'PHP/login.php',
                  type:'POST',                           
                  data: jData,                                          
                  dataType: 'json',
                  async: false,
                  error: function(xhr,status){
                        //reload();
                        location.href='index.html';
                        alert('Wrong email and password');
                  },
                  success: function(data){
                      if(data[1] == 1){
                          var Id_user = data[0];
                          location.href='loginSuccess.html';
                      }
                  }
                }); 
            });
        });
    </script>

to send my data to server. But I found that it won't work, it's still in the login page. I tried to enter data and submit again, it's still nothing happen. Until I refresh the login page and enter data again, it can give an error message or go to the loginsuccess page. However, when I use <script> function loadLogin(){ location.href='login.html'; } </script> to open the login page, everything works well.

So what cause this? How can I modify this piece of code to make it better?