hadv.de - Bedingte Maskeninhalte

Bedingte Maskeninhalte

Eingabemasken sollten übersichtlich für einem Anwender sein. Nur die Informationen, die benötigt werden, sind anzuzeigen. Werden nicht benötigte bzw. unrelevante Maskenteile angezeigt, so dienen eher der Verwirrung als das sie den Anwender helfen. Nachfolgend wird beschrieben, wie diese bedingten Maskeninhalte ein- und auszublenden sind.

Leere Maske

Das linke Bild zeigt die Maske in einem Zustand, wo noch keine Auswahlentscheidung über das Profil getroffen wurde.

Profilauswahl

Der Anwender trifft nun seine Entscheidung über das benötigte Profil.

Zwischenrechnung

Aufgrund der Profilauswahl durch den Anwender wird nun eine Maskensektion neu angezeigt. Der Anwender gibt in dieser Sektion die Daten ein, die für eine Zwischenberechnung notwendig ist.

Übernahme der Werte aus Tabelle

Wählt der Anwender ein Profil aus, wo die Daten in einer Tabelle hinterlegt sind, so werden diese Daten übernommen.

HTML-Code

Folgender Code zeigt die Profilauswahl in der HTML-Datei.

<select name="prf01_1_4_5" id="prf01_1_4_5" size="1" onchange="optionalSectionChange(this,'profilChoice');prf01_recalc_onclick('');" tabindex="1" class='comboboxReq'>
<option value="" selected></option>
<option value="Quadrat (berechnet)">Quadrat (berechnet)</option>
<option value="Kreis (berechnet)">Kreis (berechnet)</option>
<option value="Rohr (berechnet)">Rohr (berechnet)</option>
<option value="I-Profil warmgewalzt (DIN 1025)">I-Profil warmgewalzt (DIN 1025)</option>
<option value="U-Profil warmgewalzt (DIN 1026)">U-Profil warmgewalzt (DIN 1026)</option>
<option value="L-Profil gleichschenklig warmgewalzt (DIN 1028)">L-Profil gleichschenklig warmgewalzt (DIN 1028)</option>
</select>
</div>
...
<div class="optionalSection" name="profilChoice" id="Quadrat (berechnet)" style="display:none">
...

Realisierung in JavaScript

Hier nun der JavaScript-Code.

function optionalSectionChange(iObj,iName) {
 var tmpObj;
 var tmpVal = iObj.value;
 var tmpLstObjs = document.getElementsByName(iName);
 for (var i = 0; i < tmpLstObjs.length; i++) {
   tmpObj = tmpLstObjs[i];
   if (tmpObj.id === tmpVal) {
     if (tmpObj.style.display === 'none') {
       tmpObj.style.display = 'block';
     }
   }
   else {
     if (tmpObj.style.display === 'block') {
       tmpObj.style.display = 'none';
     }
   }
 }
};