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"); }); }); });
This can happen when you have turned on live server extension or something like that refresh html pages. An example of how to check this would be useful. This was causing my problem with the vs code live server extension.
Click the Start button, type “internet options” and select Internet Options in the search results. In the Internet Properties window, click “Custom tab -> Custom level,” then in the Security Settings window, scroll down until you find “Allow META REFRESH.” Disable this option and click OK.
AJAX is about updating parts of a web page, without reloading the whole page.
You can use event. preventDefault() to prevent the default event (click) from occurring.
Adding type="button"
attribute to button solved my problem. Otherwise it was interpreted as submit operation.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With