title: How to stop refreshing page after ajax call?
body: <p>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. </p>
  
  <p>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.</p>
  
  <p>Here is my code:</p>
  
  <pre><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");
          });
      });
  });
  </code></pre>