How to stop refreshing page after ajax call?

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");
        });
    });
});

Solution 1:

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

Solution 2:

Is the id #loginForm pointing to a form? If yes you need to listen to the submit event instead of click. If you really need to listen to the click event, you have to bind the event to the submit button or whatever triggers the form.submit().

Try something like this:

$('#loginForm').on('submit', function(e) {
    e.preventDefault();
    e.stopPropagation(); // only neccessary if something above is listening to the (default-)event too

    [YOUR CODE GOES HERE]
});

This should do the trick for you.

Solution 3:

This was happening to me earlier tonight, and I found my way to this question - This might be a long shot but I realized what my issue was and figure this might help someone in the future dealing with this.

Are you using something like live-server locally or some other form of script that intelligently refreshes local code if new files appear in the same working folder? If so - the page is refreshing not because of your code, but because whatever ajax you called manipulated the folder you were working in resulting in the page 'updating'.

Solution 4:

I think just adding return false after the on click function will stop the page from refreshing