When form submitting and the page refreshing my loading screen comes in agin?-CodePudding

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?

CodePudding user response：

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

CodePudding user response：

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