Formular Reset

Lieber Ingmar,
liebes Team,

ich komme an einer Stelle in einem für mich recht komplizierten Formular, in dem einige manuelle bedingte Anzeigen mit vielen Bedingungen umgesetzt werden soll, nicht wirklich weiter.

Ich habe mich daher dazu entschlossen, anstellen komplizierter Bedingungen an einigen Stellen einfach einen Reset durchführen zu lassen, so wie er ausgelöst wird, wenn man den Reset Button des Formulars einfach betätigt.

Dazu habe ich dieses Skript implementiert, was aber zu Loops im Frontend führt:

  function resetAutismusdiagnoseIfNoCheckboxChecked() {
        // Überprüfen, ob mindestens eine Checkbox angehakt ist
        let atLeastOneChecked = Object.values(checkboxIds).some(id => jQuery(`#field${id}`).is(':checked'));
   
        // Falls keine Checkbox angehakt ist, das Formular zurücksetzen
        if (!atLeastOneChecked) {
            jQuery(document).ready(function() {
                // Formular suchen
                var form = jQuery(`#form${idForm}`);
               
                if (form.length) {
                    // Formular zurücksetzen
                    form[0].reset();
   
                    // Leeren aller Eingabefelder (Checkboxen, Radio-Buttons, Select-Boxen, Textfelder)
                    jQuery('input[type="text"], input[type="radio"], input[type="checkbox"], select, textarea').each(function() {
                        jQuery(this).val(''); // Leert Textfelder und Textareas
                        if (this.type === 'checkbox' || this.type === 'radio') {
                            jQuery(this).prop('checked', false); // Setzt Checkboxen und Radio-Buttons zurück
                        }
                    });
                } else {
                    console.error('Das Formular mit der ID ' + idForm + ' wurde nicht gefunden.');
                }
            });
        }

Könntest du mir einen Tipp geben, wie ich den Reset ordentlich durchführen kann?

Vielen Dank!
Michael

Hallo Michael,

Zu: Tipp geben, wie ich den Reset ordentlich durchführen kann.

Visforms hat keinen eigenen Code, um die Eingabe-Felder zurückzusetzen.
Das Zurücksetzen der Eingabe-Felder erfolgt allein durch Klick auf einen beliebigen HTML-Button mit dem richtigen Typ.

Um das Formular durch JavaScript zurückzusetzen, reicht es aus auf dem Formular-Objekt die Funktion 'reset()' auszuführen, was du ja in dem JavaScript Code an einer Stelle durchführst.

Warum es zu 'Loops' kommt, kann ich anhand deines JavaScript-Ausschnittes allein nicht mit Sicherheit sagen.
'Loops' zu finden erfordert oft die Kenntnis und Untersuchung des gesamten Vorgangs.

Mir fällt allerdings auf, dass du ein 'form[0].reset()' durchführst und gleichzeitige auch Änderung an Formular-Feldern.
Das könnte durchaus zu Problemen führen.
Vielleicht reicht es aus und würde bereits den 'Loop' beheben, wenn du ausschließlich den form[0].reset() durchführst.

Manche Arten von 'Loops' und Blockierungen können durch die Nutzung eines asynchronen Aufrufs gelöst werden.
Wenn du ein 'form[0].reset()' durchführst und gleichzeitige auch Änderung an Formular-Feldern, könntest du den einen Teil davon asynchron ablaufen lassen.
Ich würde in dieser Situation die Änderung an Formular-Feldern in den asynchronen Aufruf verpacken.

Die 'Bitte Warten' Funktion setTimeout() ist eine einfache asynchrone Funktion, die dazu verwendet werden kann.
Sie wird oft allein deswegen eingesetzt und nicht wirklich, weil da etwa gewartet werden müsste.

Der Code gibt Folgendes in der Konsole aus:
HELLO
DOG
THIS IS

Liebe Grüße, Ingmar