how to disable all submit type in a html on any submit

Question

I have so many HTML pages in my application and we have issues with impatient user submitting the same input multiple times, I want to use JavaScript or JQuery to disable all type=Submit fields or at least disable the submitted field. I am trying to avoid HTML changes and handle this with just script.

What have you tried? What don't you understand? Are you asking how to find buttons? How to disable things? — SLaks, Oct 17 '17 at 20:35
[e.preventDefault();](https://api.jquery.com/event.preventdefault/) — wpcoder, Oct 17 '17 at 20:36
I do not have them as buttons, they are input of type submit with a value — Rookie, Oct 17 '17 at 20:45

Fenton · Answer 1 · 2017-10-17T20:54:23.990

You can add a disabled attribute when the form is submitted, or when the button is clicked...

$('form').on('submit', function () {
    $('button', this).attr('disabled', 'disabled');
});

You will need to extend this example to handle validation failures or AJAX requests (i.e. to re-enable the button).

Or if you have input's with a type of submit...

$('form').on('submit', function () {
    $('input[type=submit]', this).attr('disabled', 'disabled');
});

score 0 · Answer 2 · answered Oct 17 '17 at 21:07

I've recently started adding a loading icon that pops up to show the user that something is being processing. This loading icon would sit inside of a container that takes up the entire page (absolute position) and has an opacity of 0.5 for example. This will gray out everything in the background as well as prevent the user from being able to click any other buttons.

Here's the HTML

<div class="loader-container" >
   <div class="loader"></div>
</div>

And the CSS

.loader {
            border: 10px solid #f3f3f3; 
            border-top: 10px solid #3498db;
            border-radius: 50%;
            width: 75px;
            height: 75px;
            animation: spin 2s linear infinite;
        }
        .loader-container{
            background: rgba(0,0,0,0.35);
            position: fixed;
            z-index: 5;
            top: 0; left: 0; right: 0; bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

You'll obviously have to toggle the loader-container's visibility when the user clicks submit.

how to disable all submit type in a html on any submit

2 Answers2