Disabling 'Submit' Button (while Processing on Server) without jQuery

Question

I have an old legacy Web app where I can't add jQuery.

When a form is submitted, a long server-side action takes place, and I need to disable 'Submit' until the response is rendered, or maybe the change the cursor.

I found a solution here which shows the Loading banner on Submit, https://stackoverflow.com/a/30906566/1005607

but it doesn't remove it when the page is rendered. There is a Forward action from my Struts Action class. How would I remove the banner once it's finished?

<script type="text/javascript">
    function ShowLoading(e) {
        var div = document.createElement('div');
        var img = document.createElement('img');
        img.src = 'loading_bar.GIF';
        div.innerHTML = "Loading...<br />";
        div.style.cssText = 'position: fixed; top: 5%; left: 40%; z-index: 5000; width: 422px; text-align: center; background: #EDDBB0; border: 1px solid #000';
        div.appendChild(img);
        document.body.appendChild(div);
        return true;
        // These 2 lines cancel form submission, so only use if needed.
        //window.event.cancelBubble = true;
        //e.stopPropagation();
    }
</script>

<form  onsubmit="ShowLoading()">
</form>

So what exactly does your form do? Do you do an actual form submit or an ajax call? If you do a form submit the whole page will reload and the banner will disappear anyways? — Danmoreng, Oct 07 '16 at 15:32
You need to call JavaScript function to stop or hide the banner. In asp.net you can do it using clientscript.registerstartupscript or response.write — Ram, Oct 07 '16 at 15:35

score 0 · Answer 1 · answered Oct 07 '16 at 15:40

Target your button and set its disabled attribute to true.

document.querySelector("button").setAttribute('disabled', true);

I usually refer to this website when I need to make a change that isn't enough to require me to use jQuery. http://youmightnotneedjquery.com/

score 0 · Answer 2 · answered Oct 07 '16 at 15:51

with out too much context, It would be somewhat difficult to say where to call another script, but I certainly can help with a script to remove your div. first you will want an ID on the div, so you can modify your hide script to have this:

div.id = "loadingMsg";

and else where you can have another script

function hideLoading()
{
    var div = document.getElementById("loadingMsg");
    div.parentElement.removeChild(div);
}

now you only have to find the correct place to call this.

you may also consider hiding and showing your submit button, like so (assuming that submitButton is your button)

submitButton.style.visibility = "hidden";

submitButton.style.visibility = "visible";

Disabling 'Submit' Button (while Processing on Server) without jQuery

2 Answers2