Formular ausblenden nach Absenden

von Benutzer gelöscht | 0 | 5382 Aufrufe

Anzeige Hier werben

Sinn dieses Artikels

Da es passieren kann, dass der Server die Anfrage eines Formulars nicht schnell genug bearbeiten kann kommt es durch aus vor, dass ein Benutzer mehrfach auf den Abschicken Button drückt.
Um das zu verhindern, soll das gesamte Formular nach dem Versenden Ausgeblendet werden und eine neue Box erstellte werden, die so groß ist wie das Formular.
In dieser soll stehen, dass das Formular abgeschickt ist, und die Daten verarbeitet werden.

Der Code

 
JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function hideFormsOnSubmit(CLASSNAME) {

    var CLASS = CLASSNAME;

    this.run = function() {
        this.getAllForms();
    }

    this.getAllForms = function() {
        forms = document.getElementsByTagName('form');
        for(i = 0;i < forms.length;i++) {
            form = forms[i];
            form.onsubmit = function() {
                createLoadingScreen(this, this.offsetWidth, this.offsetHeight);
                this.style.display = 'none';
            }
        }
    }

    createLoadingScreen = function(FORM, WIDTH, HEIGHT) {
        loadingScreen = document.createElement('div');
        loadingScreen.style.width = WIDTH + 'px';
        loadingScreen.style.height = HEIGHT + 'px';
        loadingScreenText = document.createTextNode("Das Formular wurde erfolgreich abgeschickt. Die Datei " + FORM.getAttribute('action', false).replace(/([^\/]+)$/, '$1') + " wird geladen, bitte warten ...");
        loadingScreen.appendChild(loadingScreenText);
        loadingScreen.className = CLASS;
        FORM.parentNode.insertBefore(loadingScreen, FORM);
    }
}

Erklärung des Codes

  • 1. Zeile: Deklaration der Funktion hideFormSubmit, als Parameter der Klassenname für die Box die erscheinen soll
  • 3. Zeile: Variable mit dem Inhalt der Klasse nach dem Aufruf
  • 5. Zeile: Deklaration der Subfunktion run, damit alle Formulare überwacht werden
  • 6. Zeile: Aufruf der Subfunktion getAllForms
  • 9. Zeile: Deklaration der Subfunktion getAllForms
  • 10. Zeile: Alle Formulare im Momentanen Dokument holen und in forms speichern
  • 11. Zeile: Jedes einzelne Formular durchgehen
  • 12. Zeile: Aktuelles Formular in der for Schleife in form speichern für einfacherer Schreibweise
  • 13. Zeile: Auf das Event onsubmit des Formulars warten
  • 14. Zeile: Aufruf der Subfunktion createLoadingScreen mit den Parametern:
    • 1. Parameter: Das momentane Formular
    • 2. Parameter: Die berechnete Breite des Formulars vom Browser
    • 3. Parameter: Die berechnete Höhe des Formulars vom Browser
  • 15. Zeile: Das Formular verstecken
  • 20. Zeile: Deklaration der Subfunktion createLoadingScreen
  • 21. Zeile: Neues Element (div) erstellen und in loadingScreen speichern
  • 22. Zeile: Neues Text Element erstellen und in loadingScreenText speichern
    • Was ist FORM.getAttribute('action', false).replace(/([^\/]+)$/, '$1'):
    • Damit Filter ich das Zieldokument des Formulars heraus
  • 23. Zeile: Den Text in das Element einfügen mit appendChild
  • 24. Zeile: Dem Element (div) die CSS Klasse geben
  • 25. Zeile: Das Element (div) direkt vor dem verstecktem Formular einfügen

So wirds benutzt

 
JavaScript
1
2
3
4
window.onload = function() {
    hideforms = new hideFormsOnSubmit('aClass');
    hideforms.run();
}

Erklärung dazu

  • 1. Zeile: Beim laden des Dokuments führe aus
  • 2. Zeile: Funktion aufrufen + CSS Klassenname für Box
  • 3. Zeile: Subfunktion von hideFormsOnSubmit aufrufen damit die Funktion in Gang gesetzt wird
Über den Autor: Benutzer gelöscht
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
Profilseite betrachten