I am trying to create a login page. I made a loading screen that fades when the page loads.
$(window).on("load",function(){
setTimeout(function() {
$(".loading").fadeOut("slow", function(){
$(".container").fadeIn("slow").css("display", "flex");
});
}, 500);
});
The problem is there when you submit a form and the page refreshes because then the loading screen comes in again. Any solution?
You can prevent the form from submitting with
$("#prospects_form").submit(function(e) {
e.preventDefault();
})
Without jQuery:
var form = document.getElementById("myForm");
function handleForm(event) { event.preventDefault(); }
form.addEventListener('submit', handleForm);
1- You can use Ajax for sending the form to the server.
2- Or do something like this:
// add an item to session before form submitting.
$(document).on('submit', function (e) {
e.preventDefault()
sessionStorage.setItem('notLoad', '1')
$('form').submit() // add any attr to form idetifier.
})
$(window).on('load', function () {
// check the session to know if the page loaded from form submitting or not:
if (sessionStorage.getItem('notLoad') !== '1') {
sessionStorage.removeItem('notLoad');
setTimeout(function () {
$('.loading').fadeOut('slow', function () {
$('.container').fadeIn('slow').css('display', 'flex')
})
}, 500)
}
})