How to add loading progress after Submit button click

Question

I have a submit button to call a function named mandatoryNotes(). It is taking a few seconds to load in a new widow. I need to show a gif image and page overlay to block user interaction until the loading is complete.

How can I do that?

<div class="em" id="formsubmitbutton">
    <input type="button" name="Submit" value="Submit" class="buttonEm" onClick="mandatoryNotes()">
</div>

function mandatoryNotes(){
    var formvalue = "invoiceAttributesDetailsFORM";
    validateInput(document.invoiceAttributesDetailsFORM);
    var queryString;
    if (checkValidation == "true") {

        submitSpecialBidDetails(document.invoiceAttributesDetailsFORM);
        queryString = "&EUAM_SELECTED_FORM=" + formvalue;
        var legendURL = "/EUAM/ADRGateway?jadeAction=MANDATORY_NOTES_ACTION_HANDLER";
        var winData = 'scrollbars=yes,resizable=yes,status=yes,width=500,height=500';
        window.open("MandatoryNotes.jsp", "ADDVIEWNOTES",winData);
        window.close();
    }
}

Answer 1

What you are creating is not the expected Javascript approach for any kind of a POST/GET to a server.

You have to use AJAX to POST on your "MandatoryNotes.jsp" page. That way you have a callback when the AJAX call finishes.

Example of an AJAX Call with jQuery:

    function mandatoryNotes(){
        var formvalue = "invoiceAttributesDetailsFORM";
        var queryString = "&EUAM_SELECTED_FORM=" + formvalue;
        var legendURL = "/EUAM/ADRGateway?jadeAction=MANDATORY_NOTES_ACTION_HANDLER";

        validateInput(document.invoiceAttributesDetailsFORM);

        if (checkValidation == "true") {
          submitSpecialBidDetails(document.invoiceAttributesDetailsFORM);

          jQuery.ajax({
            url: "MandatoryNotes.jsp",
            data: queryString,
            success: function(response){
              console.log(response);
            }
          });
        }
}

Check this out , it will provide some more info : AJAX with jQuery

While you have an AJAX call , you can achieve your goal by simply adding / visible / block an animated image in the DOM when your user presses your submit button and on the "success" of your AJAX Call remove / invisible / none the image.

Adding and Removing the image will be done through Javascript either with plain Javascript using innerHTML and removeChild or with jQuery :

jQuery('#MY_CONTAINER').append("<div id='AJAXLoader'><img src='myAJAXLoader.gif'></img><div>");
jQuery('#MY_CONTAINER').remove();

Same with changing the style of your Gif container :

With jQuery :

jQuery('#AJAXLoader').css("visibility" , "visible");
jQuery('#AJAXLoader').css("visibility" , "hidden");

OR

jQuery('#AJAXLoader').css("display" , "block");
jQuery('#AJAXLoader').css("display" , "none");

Plain Javascript

document.getElementById('AJAXLoader').style.visibility = "visible";
document.getElementById('AJAXLoader').style.visibility = "hidden";

OR

document.getElementById('AJAXLoader').style.display = "block";
document.getElementById('AJAXLoader').style.display = "none";