Wie alle Submit-Typ in einem HTML-Code auf alle senden deaktivieren

Question

Ich habe so viele HTML-Seiten in meiner Anwendung und wir haben Probleme mit ungeduldigen Benutzer die gleiche Eingabe mehrmals, möchte ich JavaScript oder JQuery verwenden, um alle Typ = zu deaktivieren Reichen Sie Felder ein oder deaktivieren Sie das übermittelte Feld. Ich versuche, HTML-Änderungen zu vermeiden und handle dies mit nur Skript.

Answer 1

Sie können ein disabled-Attribut hinzufügen, wenn das Formular abgeschickt wird, oder wenn die Schaltfläche geklickt wird ...

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

Sie müssen dieses Beispiel erweitern Validierungsfehler oder AJAX-Anfragen zu behandeln (dh wieder -fähig den Knopf).

Oder wenn Sie Eingabe des mit einer Art einreichen ...

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

Answer 2

ich vor kurzem begonnen habe eine Ladesymbol hinzufügen, die den Benutzer zeigen erscheint, dass etwas Verarbeitung zu sein. Dieses Ladesymbol würde innerhalb eines Containers sitzen, der die gesamte Seite (absolute Position) einnimmt und beispielsweise eine Deckkraft von 0,5 hat. Dadurch wird alles im Hintergrund ausgegraut und verhindert, dass der Benutzer auf andere Schaltflächen klicken kann.

Hier ist der HTML

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

Und die 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; 
     } 

Sie werden offensichtlich die loader-Container Sichtbarkeit umschalten müssen, wenn der Benutzer klickt einreichen.