Formular: Inputfelder mit verschiedenen Buttons verknüpfen

[Birlie]

Hallo,

ich habe ein Formular mit verschiedenen Eingabefeldern und dazugehörigen Submitbuttons.

Leider wird aber beim drücken dee Enter Taste immer nur der erste Button im Formular angewählt, egal in welchem Input.Feld man sich befindet.

Ich möchte aber daß, wenn man sich in einem bestimmten Input Feld befindet, der dazugehörige Submitbutton gedrückt wird wenn man Enter drückt da ich jeweils 2 Inputfelder habe zu denen ein Submitbutton gehört.
Also sozugen das Inputfeld mit einem bestimmten SubmitButton verknüpfen.

Ich hoffe ich habe das jetzt nicht zu kompliziert beschrieben.

Danke für jede Hilfe,
Gruß, Birlie

[molily]

Hallo Birlie,

ich habe ein Formular mit verschiedenen Eingabefeldern und dazugehörigen Submitbuttons.

Leider wird aber beim drücken dee Enter Taste immer nur der erste Button im Formular angewählt, egal in welchem Input.Feld man sich befindet.

Ich möchte aber daß, wenn man sich in einem bestimmten Input Feld befindet, der dazugehörige Submitbutton gedrückt wird wenn man Enter drückt da ich jeweils 2 Inputfelder habe zu denen ein Submitbutton gehört.

Also sozugen das Inputfeld mit einem bestimmten SubmitButton verknüpfen.

Das ist leider nur umständlich zu lösen, daher ein sehr langes Posting:

Die Hintergründe von ähnlichen habe ich in </archiv/2003/1/36579/#m200667> und </archiv/2003/10/61999/#m350160> beschrieben. Beides kombiniert sollte eine Lösungsmöglichkeit ergeben. Zunächst einmal hängt es sehr davon ab, wie dein Formular aufgebaut ist. Im Folgenden gehe ich davon aus, dass es eine Liste von eventuell vorbelegten Eingabefeldern gibt, zu denen jeweils ein Submitbutton existiert, der etwa »Datensatz ändern« bezeichnet ist und bei der Verarbeitung eben dieser Datensatz mit den neuen Werten aktualisiert werden soll bzw. irgendetwas anderes mit den Daten angestellt werden soll. Die einfachste nd kompatibelste Variante wäre natürlich die Aufsplittung des einen großen Formulars in viele kleine, für jedes Eingabefeld-Submitbutton-Paar eines.

Aber gehen wir von einem großen Formular aus: Dabei ist einerseits JavaScript notwendig und andererseits muss das serverseitige Programm, das die Daten empfängt und verarbeitet, entsprechend reagieren. Ein Beispiel, wie so etwas aussehen könnte:

Im Dokumentkopf zwei JavaScript funktionierne, um den HTML-Code möglichst übersichtlich zu halten:
<script type="text/javascript">
function feldaktiv (name) {
 document.forms['formular'].elements['aktivesfeld'].value=name;
}
function submitaktiv (name) {
 document.forms['formular'].elements['aktiversubmit'].value=name;
}
</script>

Das Formular selbst:
<form name="formular" action="test.php" method="post">
<ul>
<li><input type="text" name="a1" onfocus="feldaktiv(this.name)"> <input type="submit" name="s1" onfocus="submitaktiv(this.name)"></li>
<li><input type="text" name="a2" onfocus="feldaktiv(this.name)"> <input type="submit" name="s2" onfocus="submitaktiv(this.name)"></li>
<li><input type="text" name="a3" onfocus="feldaktiv(this.name)"> <input type="submit" name="s3" onfocus="submitaktiv(this.name)"></li>
</ul>
<p><input type="text" name="aktivesfeld" value="leer"> <input type="text" name="aktiversubmit" value="leer"></p>
</form>

Die Grundannahme ist ja, dass beim Drücken der Enter-Taste nicht der Submit-Button verwendet wird, der zum Formularfeld gehört (siehe meine verlinkten Untersuchungen).
Wenn in obiges Formular also in das dritte Eingabefeld etwas eingegeben wird (bspw. »test«) und Enter gedrückt wird, sendet bspw. der MSIE s1=Anfrage+Senden, so als ob der erste Submitbutton geklickt wurde. Daher ist diese Angabe unbrauchbar. (Zumindest, wenn nicht nur ein Eingabefeld gefüllt ist, sonst lässt sich leicht feststellen, in welches Eingabefeld etwas eingegeben wurde, weil nur dieser Parameter gefüllt wäre.) Beim Server käme für den Beispielfalle folgendes an:

a1 => ''
s1 => 'Anfrage senden'
a2 => ''
a3 => 'test'

Damit lässt sich nicht viel anfangen, wenn a1 und a2 ebenfalls Werte enthalten können, die nicht geändert wurden.
Es muss also für den Fall des Absendens über Tastatur eine Möglichkeit gefunden werden, das zuletzt aktivierte Eingabefeld in Erfahrung zu bringen. Dazu wird ein verstecktes Eingabefeld mit dem Namen aktivesfeld eingeführt (oben hat es type="text" statt type="hidden", damit es zum Testen sichtbar ist). In dieses versteckte Eingabefeld wird automatisch der Name eines Eingabefelds geschrieben, welches zuletzt aktiv war. Dazu bekommt jedes Eingabefeld einen onfocus-Event mit entsprechendem JavaScript. Beim Fokussieren eines Feldes wird der Name des fokussierten Feldes in das versteckte Feld aktivesfeld geschrieben (das erledigt die Funktion feldaktiv). Wenn der Cursor in das erste Eingabefeld gesetzt wird, wird also »a1« in das versteckte Eingabefeld geschrieben und so weiter.
Beim Absenden steht dadurch der Feldname des zuletzt aktivierten Feldes zur Verfügung. Wird bspw. in das dritte Feld »test« eingegeben und Enter gedrückt, so sendet MSIE folgendes:

a1 => ''
s1 => 'Anfrage senden'
a2 => ''
a3 => 'test'
aktivesfeld => 'a3'

Damit ist schon einmal bekannt, welches Feld zuletzt aktiviert war. Vorschnell könnte angenommen werden, dass im dritten Feld Enter gedrückt wurde und dadurch das Formular abgesendet wurde. Allerdings gibt es Szenarien, die dieser Annahme widersprechen:

Angenommen, alle Felder sind gefüllt und das erste Feld wird fokussiert und geändert. Danach wird aber mindestens ein anderes Feld angeklickt, dort aber nichts geändert. Letztlich klickt der Benutzer aber auf den ersten Submitbutton.
Oder wenn das Formular mit der Tastatur (Tabulatortaste o.ä.) durchsprungen wird: Angenommen, alle Felder sind gefüllt und das erste Feld wird fokussiert und geändert. Danach wird aber noch per Tastatur das zweite zweite Feld angesprungen, in welchem aber nichts geändert wurde. Mit Umschalt + Tabulator wird wieder zurück zum ersten Submitbutton gesprungen und er wird mit Enter aktiviert.
Beim Server jeweils käme an:

a1 => 123
s1 => Anfrage senden
a2 => def
a3 => ghi
aktivesfeld => a2

aktivesfeld ließe darauf schließen, dass das geänderte Feld das zweite ist, in Wirklichkeit war es aber das erste. Dies alleine reicht also nicht aus. Um die obigen Szenarien abzudecken, hat der eingangs erwähnte Code einen zweiten Mechanismus: Es wird analog zu den Eingabefeldern jeweils der Name des zuletzt fokussierten Submitbuttons in einem zweiten versteckten Eingabefeld gespeichert. Dieses heißt im Beispielcode »aktiversubmit«. Dabei macht man sich zu Nutze, dass beim beim Anklicken des Submitbuttons sowie beim Fokussieren mit der Tastatur der onfocus-Event ausgelöst wird. Das Speichern funktioniert genauso, nur eben über die Funktion submitaktiv.

Bei den besagten Szenarien würde also abgesendet:

a1 => 123
s1 => Anfrage senden
a2 => def
a3 => ghi
aktivesfeld => a2
aktiversubmit => s1

Damit ist ganz sicher, dass der erste Submitbutton geklickt/gedrückt wurde und das Feld, das verarbeitet werden muss, das erste ist (obwohl in aktivesfeld a2 steht). Wenn aktiversubmit gefüllt ist (d.h. nicht »leer« enthält), ist der übertragene Submitbutton-Wert (s1 => Anfrage senden) zuverlässig (ansonsten wie gesagt nicht notwendigerweise), sofern er denn gesetzt ist (Mozilla macht dies wie gesagt nicht).

Nun ist die Frage, in welcher Reihenfolge bestimmt wird, welches Feld denn nun geändert wurde. Ich würde folgendes Vorgehen vorschlagen (Pseudocode):

Falls dem Parameter »aktivesfeld« nicht gleich dem String »leer« ist {
 Falls der Parameter »aktiversubmit« nicht gleich dem String »leer« ist {
  Nehme die Nummer aus dem Parameter »aktiversubmit«
  als die Nummer des zu verarbeitenden Datensatzes.
 } ansonsten {
  Nehme die Nummer aus dem Parameter »aktivesfeld«
  als die Nummer des zu verarbeitenden Datensatzes.
 }
} ansonsten {
 Suche unter den übermittelten Parameter denjenigen heraus,
 der mit »s« beginnt. Dies ist der angewählte Submitbutton.
 Nehme die Nummer daraus als Nummer des zu verarbeitenden Datensatzes.
}

Der zweite ansonsten-Teil ist für die Fälle gedacht, in denen JavaScript deaktiviert ist oder keine Änderung vorgenommen wurde, aber ein Submitbutton geklickt/gedrückt wurde. In diesen Fällen muss vom übermittelten Submitbutton ausgegangen werden, selbst wenn dieser nichts mit dem geänderten Datensatz zu tun haben kann (bspw. im Falle des Absendens über Enter).

In PHP sähe das etwa so aus, wenn von obiger Formularfeldbenennung ausgegangen wird:

if ($_POST['aktivesfeld'] != 'leer') {
 if ($_POST['aktiversubmit'] != 'leer') {
  $feldnr=$_POST['aktiversubmit']{1};
 } else {
  $feldnr=$_POST['aktivesfeld']{1};
 }
} else {
 while (list($key)=each($_POST)) {
  if ($key{0} == 's') $feldnrnr=$key{0};
 }
}

In $feldnr stünde nun die Nummer des zu verarbeitenden Datensatzes, $_POST['a'.$feldnr] wäre also der Parameter mit den fraglichen Daten.

Soweit ich es abschätzen kann und getestet habe, sollte obiges Konzept relativ zuverlässig sein. Natürlich nicht so zuverlässig wie eine einfachere Variante ohne JavaScript, wie gesagt. Leider fällt Opera 5 aus der Reihe, da er kein onfocus für Submitbuttons kennt (Opera 6 kann es; selbst Netscape 4 kann es, wobei der in dem Fall sowieso kein Absenden über Enter kennt).

Jetzt ist die Frage, ob du so etwas suchtest und es deinem Formularaufbau entspricht. Vorausgesetzt ist natürlich auch, dass die Benutzer wissen, dass immer nur ein Datensatz geändert werden kann und nicht mehrere Eingabefelder abändern - aber für den Fall kannst du ja noch einen globalen Submitbutton einbauen.

Mathias