The subtleties of the disable property of the form buttons sent to the server (How to make buttons inactive)

Already repeatedly on Habré (in this publication and in this one ) the question was raised that it would be good for the buttons of the form sent to the server to set the property disabled = "disabled" .

However, they still have not figured out why this is necessary and how to do it after all. It would seem that it can be simpler and what you can talk about here at all, but no - in fact everything turned out to be not so trivial. Immediately, I note that the following reasoning applies to both types of forms: as sent through the usual SUBMIT, and using AJAX.

Why do I need to make buttons inactive

1. To make it obvious to the user that he has already pressed the button, and that the form is being sent
2. That the server is not loaded with unnecessary requests, and to reduce the likelihood of any error

It is clear that you can prevent unnecessary clicks by hanging a special visualization, saying that the request is accepted and the form is sent (the simplest example is to show some animated gif). However, the buttons still remain clickable, and the most impatient users will not use this opportunity. At the same time, the form will not be able to respond to these additional clicks (the animated gif is already spinning), and the user’s frustration will only increase.

It is also clear that unnecessary requests can be prevented by hanging on the form of some class="form_is_loading" , and with any sabmite check for the presence of this class. But why do these checks, when you can do without them, just by making the button inactive?
')

How to make buttons inactive

  <input type = "submit" onclick = "this.disabled = true;"> 

This simple option proposed in the aforementioned topics turns out to be insufficient and inoperable.

Why it is not enough just to make the pressed button inactive:

1. Submit forms can occur by clicking on Enter. Therefore, button processing must be hung on the onsubmit event of the form itself. In addition, the form may have several buttons, and it would be logical to make them all inactive, and not just the button that was pressed.
2. If, after submitting the form, you return to the form page (using the “Back” button in the browser), then caching will work: we will encounter inactive buttons and will not be able to send the form again - without forcibly reloading the page with the loss of all previously filled fields (Return to search form from the search results page here is a lively example).
3. If the form has several buttons (for example, “Publish” and “Cancel”), then we will not be able to transfer to the server which button was pressed: the inactive button does not transmit its name and value - even if we make it inactive on the onsubmit event

So, the script for creating inactive buttons

In short, the scenario is as follows.

1. Buttons make inactive on the event onsubmit forms
2. We return the buttons to the active state before leaving the page for the window.onunload event.
3. Each form button on the onclick event should create a hidden field of the same name through which it will transmit its value to the server

And then a more detailed script with a code layout follows.

 //// html file //////////////////////////////////////////// //////////////////////////

 <form id = "the_form">
     <input type = "submit" name = "send" value = "Publish">
     <input type = "submit" name = "cancel" value = "Cancel">
 </ form>

 <script>
     formUploader.prepareForm (document.getElementById ('the_form'));
 </ script>

 //// js file ////////////////////////////////////////////// ////////////////////////////

 <script>
 formUploader = {

     prepareForm: function (form) {

         // Each significant button of the form when you click should create a hidden field of the same name,
         // so that information about which button was clicked is transmitted to the server
         var allFormFields = form.getElementsByTagName ('input');
         for (var i = 0; i <allFormFields.length; i ++) {
             if (allFormFields [i] .type == 'submit' && allFormFields [i] .name) {
                 allFormFields [i] .onclick = function () {
                     formUploader.createHiddenField (this);
                 }
             }
         }

         // Visualize the form as sent to the server on the onsubmit event
         // (including making all buttons inactive)
         form.onsubmit = function () {
             formUploader.setFormLoading (form);
         }

         // Clear the visualization of the form (including making all the buttons active again)
         // when leaving the page - on the global onunload event
         window.onunload = function () {
             formUploader.clearFormLoading (form)
         }
     },

     setFormLoading: function (form) {
         // Create visualization of form loading and make all buttons inactive
         // disabled = true;
     },
	
     clearFormLoading: function (form) {
         // Clear the form from loading visualization and return the buttons to the active state
         // disabled = false;
     },

     createHiddenField: function (button) {
         var input = document.createElement ('input');
         input.type = 'hidden';
         input.name = button.name;
         input.value = button.value;
         button.parentNode.insertBefore (input, button);
     }
 }
 </ script>