How to stop refreshing page after ajax call?

Question

I am unable to stop refreshing page after ajax call. I have tried by putting e.preventDefault(); and return false; as well but again my page is refreshing.

I dont know what is the problem with the code or something. Please help me to stop refreshing page after ajax call. solving this issue would be a great help for me. Thanks in advance.

Here is my code:

$(document).ready(function() {
    $('#loginForm').on('click', function(e) {
        e.preventDefault();
        var formData = {
            'uname'  : $('#uname').val(),
            'pwd'    :      $('#pwd').val()
        };
        $.ajax({
            type        : "POST",
            url         : "getresults.php", 
            data        : formData
        }).done(function(data) {
              alert(data+"This is working");
        }).fail(function(data) {
              alert("This is not working");
        });
    });
});

Answer 1

Adding type="button" attribute to button solved my problem. Otherwise it was interpreted as submit operation.