Form teilweise aus-/einblenden

[mnike05]

Ich habe ein Formular, bei dem einige Felder in Abhängigkeit von einer Combobox ein- oder ausgeblendet werden.

Das Einblenden funktioniert problemlos, wenn sich der Inhalt der Combobox ändert.

window.onload = init;

function init() {
    document.getElementById('Erweitert').style.display='none';    
}

function ShowErweitert() {
   var x = document.getElementById('Klasse').value;
	 if (x > 99) {
		  document.getElementById('Erweitert').style.display='block';
      }
	 else {
	   	document.getElementById('Erweitert').style.display='none';
      }
}

Wenn die Form aus der Datenbank wieder gefüllt wird, dann muss natürlich der "Erweitert"-Bereich wieder ausgegeben werden, wenn die Klasse den entsprechenden Wert hat.

Ich wollte das mit

document.addEventListener('DOMContentLoaded', ShowErweitert);

erreichen. Das wird auch durchlaufen, aber das window.onload kommt erst danach.

Kann mir jemand einen Tipp geben, wie ich vorgehen sollte?

mike

[Rolf B]

Hallo mnike05,

die Event-Reihenfolge ist DOMContentLoaded, wenn das DOM fertig aufgebaut ist, und load, wenn alle Zusatzressourcen (z.B. CSS-Dateien und Bilder) geladen sind.

Einen ready-Handler an's load-Event zu hängen ist nicht gut. Wenn viele externe Ressourcen da sind, kommt der zu spät zum Zuge. DOMContentLoaded ist genau dafür da.

Aber Vorsicht: Bei JavaScript, das im HTML drinsteht oder ohne async-Attribut per Script-Element geladen wird, kann man davon ausgehen, dass zuerst dieses JavaScript ausgeführt wird und dann die Events feuern. Wenn das bei Dir so ist, kannst Du den nächsten Abschnitt überlesen.

Bei asynchron geladenem JavaScript kann es sein, dass man diese Events verpasst. D.h. das Pattern bei asynchron geladenem Script sollte sein:

if (document.readyState == "loading")
   document.addEventListener("DOMContentLoaded", DOMContentLoadedHandler);
else
   DOMContentLoadedHandler();

Hier auf jeden Fall weiterlesen ;)

Im DOMContentLoadedHandler rufst Du dann einfach ShowErweitert auf. Die fixe Initialisierung auf display:none entfällt (bzw. würde ohnehin ins HTML oder CSS gehören).

Du solltest auch überlegen, auf das direkte Setzen von display:none/block zu verzichten. Füge statt dessen dem #Erweitert Element eine Klasse hinzu, oder nimm sie weg.

#Erweitert {
   display: none;
}

#Erweitert.aktiv {
   display: block;
}

Was auch noch passieren sollte, ist das Setzen der richtigen Aria-Attribute, damit ein Screenreader weiß, wie er den Sachverhalt einem Sehbehinderten Anwender mitteilen kann. Ich muss aber leider eingestehen, dass ich darin nicht so beschlagen bin, das können andere hier besser.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Du solltest auch überlegen, auf das direkte Setzen von display:none/block zu verzichten.

Ja.

Füge statt dessen dem #Erweitert Element eine Klasse hinzu, oder nimm sie weg.

Nein.

Das HTML-Attribut hidden bzw. die gleichnamige Eigenschaft des HTMLElement-Objekts existiert.

S.a. dieses Posting

LLAP 🖖