Enter im Formular einen bestimmten Submitbutton zuordnen

[jspit]

Wenn ein Formular mit mehreren Submit-Buttons ausgestattet ist und ich betätige im Formular die Enter-Taste, dann ist das so als würde ich den ersten Submitbutton betätigen.
Das muss je nach Lage der Submitbuttons nicht immer die Reaktion auslösen, welche der Nutzer mit Enter erwartet.
Habe im Netz neben etlichen untauglichen Empfehlungen eine einfache Möglichkeit gefunden Enter einen Submitbutton zuzuordnen ohne Javascript bemühen zu müssen.
Dafür wird einfach an die erste Stelle ein unsichtbarer Submibutton mit der gewünschten Funktionalität gesetzt:

        <input class="displaynone" type="submit" name="networksave" value="Speichern">
        <input type="submit" name="networkcancel" value="Abbruch" >

        <input type="submit" name="networksave" value="Speichern">

CSS:

.displaynone {display: none;}

Mit Enter wird das Formular in jeden Fall abgeschickt. Ist auch so gewollt und soll nicht unterdrückt werden.
Mit einem anderen Namen für den unsichtbaren Button kann auch eine spezielle Reaktion programmiert werden.

Alternativ kann auch dafür gesorgt werden das der Wunschbutton für Enter an der ersten Stelle steht und die Positionen der Buttons wird durch CSS festgelegt.
Finde ich jedoch aufwendiger.

Meine Fragen dazu:
- Geht es noch einfacher ?
- Sind Nachteile oder Probleme bei bestimmten Browsern bekannt?

LG jspit

[protestix]

Sieht interessant aus.
Probleme sind keine zu erwarten, warum auch,
Ob das auch einfacher geht? Ich kenne keine Alternative dazu die einfacher wäre.

[wario]

Ich denke, dass deine Idee, die Buttons umzupositionieren doch noch ein wenig einfacher ist als der hier vorgestellte Ansatz. Zudem muss man keinen zusätzlichen Button einbauen, der auch noch Hidden ist, gefühlt hat das ein wenig was von "tricksen" .

Da Buttons in der Regel ja zusammen (bzw. nebeneinander) in einem Container liegen, bietet sich imho Flexbox mit der Order-Property super dafür an. Wenn man das Beispiel aus dem Fiddle lokal in einer rudimentären HTML-Datei und verschiedenen PHP-Skripten als Ziel nachbaut, zeigt es genau das von dir gewünschte Verhalten nur aufgrund der paar einfachen CSS-Anweisungen aus dem Fiddle.

https://jsfiddle.net/op10k18a/

[Arne Drews]

Ich sehe in #1 ehrlich gesagt keine "saubere" Lösung.
Mich würde stören, dass ich zwei Tags mit identischem name-Value in meinem DOM habe.

[jspit]

Nun mehrere Elemente mit den selben Namen sind doch nicht so selten. Erstes Beispiel hier bei w3schools. Und nicht umsonst liefert getElementsByTagName ein Array. Anders die id. Die muss im DOM eindeutig sein.
Niemand hindert dich daran, dem ersten submit einen eigenen Namen zu geben.
Und nicht zuletzt ist die von wario gezeigte Variante auch nicht aufwendiger als die meine. Für die erste Variante bleibt nur der Vorteil, bei Wahl eines anderen Namens für das unsichtbare Submit für die Entertaste eine eigene "Behandlung" im PHP-Skript zu ermöglichen.

LG jspit

[Arne Drews]

Nun, ich finde nicht alles als heilig, nur weil es bei w3schools steht. Ist gut und übersichtlich aufgebaut, aber kein Reglement!
Doppelte name-Attribute sind auch in dem Beispiel nicht unbedingt ein Favorit für mich, das kann man auch anders lösen. Ich finde das weiterhin unsauber so. Muss ja aber nicht zwingend richtig sein, nur weil es mir nicht gefällt. Wollte einfach nur mitteilen, was ich unsauber daran finde.

Und nicht umsonst liefert getElementsByTagName ein Array.

Das greift aber auf den Tag-Namen zu. Dass es bspw. mehrere DIV- oder P-Tags geben darf/muss, ist vollkommen logisch.
Das hat doch aber nichts mit dem name-Attribut zu tun?!

Tag-Name: <div>something</div>
Name-Attribut: <div name="bingo">something else</div>

[hellbringer]

<h3>Select fruits:</h3>
<label><input type="checkbox" name="fruits[]" value="strawberry">Strawberry</label>
<label><input type="checkbox" name="fruits[]" value="cherry">Cherry</label>
<label><input type="checkbox" name="fruits[]" value="banana">Banana</label>
<label><input type="checkbox" name="fruits[]" value="orange">Orange</label>
<label><input type="checkbox" name="fruits[]" value="apple">Apple</label>

[jspit]

getElementsByTagName im Beitrag #5 ist natürlich Unsinn. Ein Schreibfehler von mir. Gemeint war getElementsByName. Und es gibt auch bessere Beispiele (#7).

[Arne Drews]

War mir bisher gar nicht bekannt, bestätigt aber, was Du gesagt hast.
Ist mir persönlich dennoch zu unsauber. Die Array-Variante von hellbringer ist dagegen eine auch von mir häufig genutzte Art. Da geht es allerdings auch wie gesagt um Arrays.

[fireweasel]

TL;DR: HTML5 ist Mist.

---

(...)
Dafür wird einfach an die erste Stelle ein unsichtbarer Submibutton mit der gewünschten Funktionalität gesetzt:

<input class="displaynone" type="submit" name="networksave" value="Speichern">
<input type="submit" name="networkcancel" value="Abbruch" >

<input type="submit" name="networksave" value="Speichern">

CSS:

.displaynone {display: none;}

(...)
- Sind Nachteile oder Probleme bei bestimmten Browsern bekannt?

Die Webbrowser haben unterschiedliche Vorstellungen davon, was als erstes Submit-Element zählt.
Safari zählt per display:none unsichtbar gemachte Submit-Buttons nicht mit.

Alternativ kann auch dafür gesorgt werden das der Wunschbutton für Enter an der ersten Stelle steht und die Positionen der Buttons wird durch CSS festgelegt.

Diese Lösung hat den Nachteil, dass die Tabulator-Reihenfolge durcheinanderkommt. Mit expliziten tabindex-Angaben kann man dem aber abhelfen.

Siehe auch: https://stackoverflow.com/questions/...ton-as-default
und: https://stackoverflow.com/questions/...491141#9491141


Zuguterletzt die Sache mit den Name-Attributen:
Unschön ist, dass bei gleichen Name-Attributen für Submit-Elemente auf Serverseite zur Unterscheidung der Submit-Elemente nur noch das, was das Value-Attribut anbietet, zur Verfügung steht. Das bereitet spätestens dann Schwierigkeiten, wenn die HTML-Ausgaben lokalisiert werden.

[hellbringer]

War mir bisher gar nicht bekannt, bestätigt aber, was Du gesagt hast.
Ist mir persönlich dennoch zu unsauber. Die Array-Variante von hellbringer ist dagegen eine auch von mir häufig genutzte Art. Da geht es allerdings auch wie gesagt um Arrays.

Aus sich des Browsers ist das aber kein Array, sondern einfach nur ein Feld mit name "fruits[]". Erst PHP interpretiert diese Namen als Array. Das ist übrigens eine Besonderheit von PHP. Das Feld könnte auch einfach nur "fruits" heißen und mehrfach verwendet werden, und der Server könnte daraus ebenso ein Array bauen.

[Arne Drews]

Ok, tut es aber nicht, oder?
Hab es jetzt nicht probiert, aber ohne Index-Klammerung dürfte das aktuell im Standard nicht funktionieren, oder?

Am Ende auch vollkommen egal, denn ich habe nur die Aussage getroffen, dass ich das in #1 verwendete Vorgehen unsauber finde.
Jeder andere darf das so machen und es als sauber bezeichnen. Wir müssen ja nicht auf einen Nenner kommen.

[hellbringer]

Ok, tut es aber nicht, oder?
Hab es jetzt nicht probiert, aber ohne Index-Klammerung dürfte das aktuell im Standard nicht funktionieren, oder?

In PHP nicht. Aber wie gesagt, das ist eine PHP-Eigenheit und hat nichts mit dem Browser oder HTML zu tun.

[jspit]

Die Webbrowser haben unterschiedliche Vorstellungen davon, was als erstes Submit-Element zählt.
Safari zählt per display:none unsichtbar gemachte Submit-Buttons nicht mit.

Habs geahnt, das irgend ein Browser da wieder rumzickt. Für den Safari ist das wohl als Bug einzustufen und gilt wohl nur für display: none;.
Es gibt ja noch andere Möglichkeiten dies per CSS zu erreichen.

Diese Lösung hat den Nachteil, dass die Tabulator-Reihenfolge durcheinanderkommt. Mit expliziten tabindex-Angaben kann man dem aber abhelfen.

Daran hab ich gar nicht gedacht und ist echt blöd. Ganz schöner Aufwand wenn da später noch ein weiteres input-Feld im Formular gebraucht wird.

Dem submit welches sozusagen Enter fängt einen eigenen Namen zu geben dürfte auch im PHP-Skript nicht zu großen Aufwendungen führen. Alternativ kann diese Element auch ohne display:none unsichtbar gemacht werden und es wird irgendwo platziert wo es nicht stört.
Für das Tabulator-Problem hab ich da tabindex="-1" gefunden, damit wir das Feld übersprungen.

Alternativ zu Variante 1 im Beitrag #1:
CSS:

.novisibility { width:0px; padding:0; margin:0; border:0;}

  <input type="text" name="text2" value="" autofocus>
  <input class="novisibility" type="submit" name="enter" value="Enter" tabindex="-1">
  <br>
  <input type="submit" name="cancel" value="Abbruch" >
  <input type="submit" name="save" value="Speichern">

Soweit ich das testen konnte ist dies so ok. Hab den Test mal hochgeladen da kann selbst mal mit den eigenen Browser probiert werden.
Das Verhalten vom Safari wäre von Interesse, hab ich leider aktuell jetzt nicht verfügbar.