template

Index :: Javascript :: Formular: ComboBox-Statistik zeigen

Wenn Formulare nicht statisch sind, sondern z.B. von PHP dynamisch als Liste aufgebaut werden, kann es leicht passieren, dass der Benutzer scrollen muss, um alle Eingaben zu überprüfen.
In solchen Fällen ist es hilfreich, in der Nähe des Submit-Buttons eine kleine Statistik einzublenden, die dem Benutzer als Kontrolle dient.

Im nachfolgenden Beispiel sollen Anträge mehrerer Personen bearbeitet werden. In jeder Tabellenzeile existiert neben dem Namen eine ComboBox mit 4 Optionen: leer (nichts tun), 'Genehmigen', 'Prüfen' und 'Verwerfen'.
Jede Änderung soll sich in einer Statistik widerspiegeln, die unter der Liste vor dem Submit-Button angezeigt wird (siehe

Demo).

Zu Beginn stehen alle ComboBoxen auf leer (nichts tun), d.h. wir brauchen weder eine Statistik noch einen Submit- oder Reset-Button.
Sobald jedoch mindestens 1 Combo eine Aktion (z.B. 'Genehmigen') anzeigt, müssen sowohl Statistik (hier als Satz 'Aktion: 1 x Genehmigen') als auch die Submit- und Reset-Buttons eingeblendet werden.
Der angezeigte Satz, bei mehreren Auswahlen z.B. 'Aktion: 3 x Genehmigen, 1 x Prüfen, 2 x Verwerfen', soll per Javascript dynamisch generiert und geschrieben werden.

Das Ausblenden der kompletten Menüzeile (mit den Buttons) geschieht durch Setzen des <TR>-Style-Attributs DISPLAY auf none.
Zum Einblenden der Zeile wird die 'Unsichtbarkeit' mittels DISPLAY="" wieder aufgehoben.
Der Statistik-String wird mithilfe dreier Counter (ActCnt[]) zusammengebaut und dann mittels innerHTML direkt in einen <SPAN>-Bereich geschrieben.
Bei Aktivierung einer ComboBox muss (über das onFocus-Event) der aktuelle Wert zwischengespeichert werden (hier: in OldAct), weil er nach einer Änderung sonst nicht mehr zur Verfügung stehen würde.
Nach jeder Änderung einer Option werden (über das onChange-Event) zuerst der Counter für die alte Aktion heruntergezählt, dann der Counter für die neue Aktion hochgezählt und schließlich die Menüzeile aktualisiert.
Der Reset-Button setzt ausserdem alle Counter wieder auf 0.

Javascript im Header
var OldAct, ActCnt = [0,0,0];
var ActTxt = ["Genehmigen", "Pr&uuml;fen", "Verwerfen"];

function OldAction(v) { OldAct = parseInt(v); }
function NewAction(v) {
  var s, i = parseInt(v);
  if (OldAct) --ActCnt[OldAct-1]; // alte Aktion: -1
  if (OldAct = i) ++ActCnt[i-1]; // neue Aktion: +1
  for (i=0,s=""; i<3; i++) {
    if (ActCnt[i]) { if (s.length) s = s+", "; s = s+"<b>"+ActCnt[i]+"</b>"+" x "+ActTxt[i]; }
  }
  if (s.length) { txtdo.innerHTML = "Aktion: "+s; tr_act.display = ""; } // sichtbar
  else tr_act.display = "none"; // unsichtbar
}
function DoReset() { OldAct = 0; ActCnt = [0,0,0]; tr_act.display = "none"; return true; }
function DoSubmit() { alert("Button 'Ausführen' gedrückt."); }
function DoBreak() { alert("Bearbeitung abgebrochen..."); }

Weiter unten, im BODY, das Formular:
<form action='javascript:DoSubmit()'>
<table cellspacing='2' cellpadding='2' border='1'><tr>
<td>Antragsteller</td>
<td>Aktion</td>
</tr><tr>
<td>Mickimaus</td>
<td><select size='1' onFocus='OldAction(this.value)' onChange='NewAction(this.value)'>
<option value='0' selected></option>
<option value='1'>Genehmigen</option>
<option value='2'>Pr&uuml;fen</option>
<option value='3'>Verwerfen</option>
</select></td>
</tr><tr>
<td>Goofy</td>
<td><select size='1' onFocus='OldAction(this.value)' onChange='NewAction(this.value)'>
<option value='0' selected></option>
<option value='1'>Genehmigen</option>
<option value='2'>Pr&uuml;fen</option>
<option value='3'>Verwerfen</option>
</select></td>
</tr><tr>
<td>Donald</td>
<td><select size='1' onFocus='OldAction(this.value)' onChange='NewAction(this.value)'>
<option value='0' selected></option>
<option value='1'>Genehmigen</option>
<option value='2'>Pr&uuml;fen</option>
<option value='3'>Verwerfen</option>
</select></td>
</tr></table>

<table cellspacing='2' cellpadding='2'><!--## Menueblock ##-->
<tr id='tr_act' style='DISPLAY:none'>
<td><span id='txtdo'></span>
&nbsp;<button type='submit'>Ausf&uuml;hren</button>
&nbsp;<button type='reset' onClick='DoReset()'>Zur&uuml;cksetzen</button></td>
</tr><tr>
<td><button type='button' onClick='DoBreak()'>Abbrechen</button></td>
</tr></table>
</form>

Noch ein Javascript-Block zur Initialisierung von Variablen
<SCRIPT type='text/javascript'>
var tr_act = document.getElementById("tr_act").style;
var txtdo = document.getElementById("txtdo");
</SCRIPT>

Index :: Javascript

template