HTML-Formular nur bei Klick auf button abschicken
Linuchs
- html
0 MudGuard0 Felix Riesterer0 pl0 pl
Moin,
bisher hatte ich nur Formulare, die man beim Hauen auf die Enter-Taste abschicken durfte, wenn ein input type=text
im Fokus ist.
Doch nun möchte ich, dass die Absende-Fläche bewusst geklickt oder berührt wird.
Deshalb habe ich dem Button bewusst `type=submit" entzogen:
...
<button class="..." style="..." name="los" value="1">Formular an ... senden</button>
</form>
Im ganzen HTML-Dokument gibt's kein submit
, trotzdem wird das Formular aus einem beliebigen input type=text
mit [Enter] abgeschickt. Wieso?
Und wie vermeide ich das?
Linuchs
Hi,
Deshalb habe ich dem Button bewusst `type=submit" entzogen:
damit gilt dann der default-Wert für das type-Attribut. Und der ist - Trommelwirbel - "submit".
cu,
Andreas a/k/a MudGuard
damit gilt dann der default-Wert für das type-Attribut. Und der ist - Trommelwirbel - "submit".
Kann nicht die ganze Wahrheit sein. habe geändert auf
<button type="text" ...>
aber immer noch kann ich aus anderen type="text"
Feldern das Formular abschicken.
Linuchs
@@Linuchs
damit gilt dann der default-Wert für das type-Attribut. Und der ist - Trommelwirbel - "submit".
Kann nicht die ganze Wahrheit sein. habe geändert auf
<button type="text" ...>
aber immer noch kann ich aus anderen
type="text"
Feldern das Formular abschicken.
text
ist kein gültiger Wert für den type
eines button
s. Deshalb gilt – Trommelwirbel – der Defaultwert.
LLAP 🖖
Guten Morgen,
Wenn man beim Drücken von Enter in Eingabefeldern <input type="text"> feststellt daß ein Submit ausgelöst wird, kann das doch wohl nicht am <button> liegen.
MFG
@@pl
Wenn man beim Drücken von Enter in Eingabefeldern <input type="text"> feststellt daß ein Submit ausgelöst wird, kann das doch wohl nicht am <button> liegen.
Doch, das kann es. Kein Submit-Button → kein Absenden des Formulars. ☞ Codepen
LLAP 🖖
Hi
Wenn man beim Drücken von Enter in Eingabefeldern <input type="text"> feststellt daß ein Submit ausgelöst wird, kann das doch wohl nicht am <button> liegen.
Doch, das kann es. Kein Submit-Button → kein Absenden des Formulars.
Da machst Du was falsch. Es kann aber auch am Bowser liegen wie auch immer, ein native submit geht auch ohne Button. Siehe Suchforumular auf dieser Seite.
MFG
@@pl
Kein Submit-Button → kein Absenden des Formulars.
Da machst Du was falsch.
??
https://bittersmann.de/test/form-submit/submit-button – Formular wird abgeschickt
https://bittersmann.de/test/form-submit/no-submit-button – Formular wird nicht abgeschickt
Es kann aber auch am Bowser liegen
… weder in Firefox nocht in Chrome.
wie auch immer, ein native submit geht auch ohne Button. Siehe Suchforumular auf dieser Seite.
🤔 Was mach ich falsch?
LLAP 🖖
Hallo Gunnar,
🤔 Was mach ich falsch?
du unterstellst, dass in einem Kommentar von pl etwas Sinnvolles stecken müsste.
*scnr*,
Martin
@@Der Martin
🤔 Was mach ich falsch?
du unterstellst, dass in einem Kommentar von pl etwas Sinnvolles stecken müsste.
Nun ja, seine Anmerkung, dass das Suchformular oben auf der Forums-Seite auch ohne Submit-Button abgesandt wird, ist schon nicht verkehrt.
LLAP 🖖
Lieber Gunnar,
🤔 Was mach ich falsch?
Du hast kein Text-Input. Ergänze eines und das Formular wird versandt. Ich habe Dein "no-submit-button"-Beispiel mit den Browser-Tools um ein drittes fieldset
mit einem input
erweitert und mit dem Fokus darinnen die Enter-Taste betätigt. Das hat das Formular abgeschickt.
Liebe Grüße
Felix Riesterer
@@Felix Riesterer
🤔 Was mach ich falsch?
Du hast kein Text-Input.
Ach, daher weht der Wind.
Implicit submission: “on some platforms hitting the "enter" key while a text control is focused implicitly submits the form”
Ergänze eines und das Formular wird versandt.
Aber auch nur eines, nicht zwei.
“If the form has no submit button, then the implicit submission mechanism must do nothing if the form has more than one field that blocks implicit submission, and must submit the form
element from the form
element itself otherwise.”
Implicit submission ist damit für Formulare mit genau einem (Text-)Eingabefeld geeignet, bei dem Nutzern klar ist, dass die Eingabe mit [Enter] abgeschlossen werden kann und es deshalb nicht unbedingt eines Submit-Buttons bedarf. Halt sowas wie ein Such-Eingabefeld.
LLAP 🖖
Lieber Gunnar,
[Signatur]
Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.
lösen wir die inhaltlichen Beschränkungen des Forums nun über Signaturen? ;-P
Liebe Grüße
Felix Riesterer
lösen wir die inhaltlichen Beschränkungen des Forums nun über Signaturen?
DER darf das. Ist einer meiner Lieferanten 😉
@@Felix Riesterer
[Signatur]
Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.lösen wir die inhaltlichen Beschränkungen des Forums nun über Signaturen? ;-P
Wer hier sagt, man dürfe sich nicht gegen Faschismus aussprechen, ist raus.
LLAP 🖖
Lieber Gunnar,
Wer hier sagt, man dürfe sich nicht gegen Faschismus aussprechen, ist raus.
absolutes Einverständnis von mir. Hoffentlich müssen wir diese Klarstellung im Zusammenhang mit HTML/CSS/JS/etc. niemals anbringen.
Liebe Grüße
Felix Riesterer
Lieber Linuchs,
Doch nun möchte ich, dass die Absende-Fläche bewusst geklickt oder berührt wird.
warum? Was willst Du wirklich erreichen?
Liebe Grüße
Felix Riesterer
Lieber Felix,
Doch nun möchte ich, dass die Absende-Fläche bewusst geklickt oder berührt wird.
warum? Was willst Du wirklich erreichen?
Das Formular sieht wie eine Excel-Tabelle aus und dort kommt man mit [Enter] ins nächste Feld. Um Verwexlungen zu vermeiden, soll das Abschicken (ich habe fertig) bewusst ausgelöst werden.
Linuchs
Lieber Linuchs,
dort kommt man mit [Enter] ins nächste Feld.
unter Verwendung von JavaScript nehme ich an? Denn der Default-Mechanismus ruft ansonsten den ersten verfügbaren Submit-Button auf und verschickt das Formular. Aber ich kann mich irren.
Wenn Du schon mit JavaScript hantierst, kannst Du am Formular einen Eventhandler registrieren, der auf das submit
-Event lauscht, um das Absenden bei Bedarf zu verhindern:
let form; // hier eine Referenz auf Dein <form> ablegen
form.addEventListener("submit", function (event) {
let element = event.target || event.srcElement,
ok = false;
// prüfen, woher das Event kam
if (element.tagName == "BUTTON" && element.type == "submit") {
ok = true;
}
if (!ok) {
event.preventDefault();
event.stopPropagation();
}
return ok;
});
Um Verwexlungen zu vermeiden,
Der Duden kann helfen.
Liebe Grüße
Felix Riesterer
Hallo Felix,
dort kommt man mit [Enter] ins nächste Feld.
unter Verwendung von JavaScript nehme ich an? Denn der Default-Mechanismus ruft ansonsten den ersten verfügbaren Submit-Button auf und verschickt das Formular. Aber ich kann mich irren.
ja, du übersiehst zum Beispiel Form Controls, die selbst auf die Enter-Taste reagieren, wie etwa Checkboxen oder Radio-Buttons. Wenn ein solches Element focussiert ist, kann man mit Enter nicht das Formular absenden.
Um Verwexlungen zu vermeiden,
Der Duden kann helfen.
So wie ich Linuchs bisher erlebt habe, bin ich mir sicher, es handelt sich hier um ein bewusstes Stilmittel. Maggi und Hechserei.
Ciao,
Martin
Hallo Der Martin,
ja, du übersiehst zum Beispiel Form Controls, die selbst auf die Enter-Taste reagieren, wie etwa Checkboxen oder Radio-Buttons.
Ich würde jetzt sagen, die reagieren nicht auf die Entertaste, sondern auf die Leertaste. Ausprobiert habe ich das allerdings so früh am Morgen nicht.
Bis demnächst
Matthias
@@Matthias Apsel
Ich würde jetzt sagen, [Checkboxen odunder Radio-Buttons] reagieren nicht auf die Entertaste, sondern auf die Leertaste.
Im Firefox ist das so. Im Safari auch. Im Edge auch. Im Chrome auch. (Zumindest auf macOS.)
Ausprobiert habe ich das allerdings so früh am Morgen nicht.
LLAP 🖖
Hallo,
ja, du übersiehst zum Beispiel Form Controls, die selbst auf die Enter-Taste reagieren, wie etwa Checkboxen oder Radio-Buttons.
Ich würde jetzt sagen, die reagieren nicht auf die Entertaste, sondern auf die Leertaste.
Eben bei einer Checkbox ausprobiert: Ja, stimmt. Und tatsächlich, mit der Enter-Taste wird das Formular auch abgeschickt.
Ich weiß aber, dass ich mich bei bestimmten Form Controls schon darüber geärgert habe, dass die das Drücken der Enter-Taste selbst "konsumieren". Und bevor jetzt jemand mit <textarea> wirft: Ja, stimmt, aber das meinte ich nicht.
Ciao,
Martin
Um Verwexlungen zu vermeiden,
Der Duden kann helfen.
So wie ich Linuchs bisher erlebt habe, bin ich mir sicher, es handelt sich hier um ein bewusstes Stilmittel. Maggi und Hechserei.
Sprache lebt, ebenso wie Schreibe. Warum sollen wir Schreiblinge auf Studierte warten, die sich - vermutlich wegen ihrer schlechten Schul-🎶 - rächen mit einer Rächschreibreform?
Da spiele ich doch lieber selbst ein wenig. Nur ganz minimal.
Die Sprache wird so luschig verwendet, ich erinnere mich an einen Blinden, der sich immer verabschiedete mit „auf Wiedersehen”. Oder der Gesprächspartner eines Stummen, der den Gebärden-Dolmetscher fragt: „Was hat er gesagt?”
Das liegt ja auch nicht am Button. Vielmehr ist submit ein Event was man am <form> selbst abfangen muss. MFG
@@pl
Das liegt ja auch nicht am Button. Vielmehr ist submit ein Event was man am <form> selbst abfangen muss. MFG
So wie es es verstehe, soll das Formular ja abgesendet werden – nur halt nicht per Enter-Taste auf einem Eingabefeld. (Ob das sinnvoll ist, die Enter-Taste mit einer anderen Funktion zu belegen, ist eine andere Frage. Aber keine unwichtige.)
Da ist der Weg, auf submit
zu lauschen, wohl nicht zielführend. Man muss auf eins der Keyboard-Events lauschen und die Enter-Taste abfangen.
LLAP 🖖
Logisch: Wenn ein Enter in einem Inputfeld, von dem es übrigens nicht nur eins gibt sondern mehrere, ein Submit auslöst, kann es ja nur an irgendeinem Button liegen der irgendwo in dieselbe Seite eingebaut ist. Da kommen die Experten und diskutieren über Eigenschaften von Buttons ?
Ist schon seltsam hier.
Lieber pl,
ich muss Dir tatsächlich zustimmen. Grml Es hat mit Buttons überhaupt nichts zu tun. Es braucht ausschließlich ein Textinput, das den Fokus hat, um das Formular mit der Enter-Taste abzusenden.
Liebe Grüße
Felix Riesterer
Idee: ersetze <input> durch <textarea> und schon ist das Problem gelöst
.
Lieber pl,
Idee: ersetze <input> durch <textarea>
das könnte neue Probleme aufwerfen, wenn z.B. Zeilenumbrüche in den Eingabedaten nicht gewünscht sind. Prinzipiell könnte man einen POST-Request faken (Ajax), der Zeilenumbrücke verschickt, sodass die serverseitige Filterung von Zeilenumbrüchen nach wie vor ein Muss bleibt. Aber ich gebe Deiner Idee insofern Recht, als dass das submit
-Event damit nicht mehr ausgelöst wird.
Ob die visuelle Gestaltung mit einer Textarea dann noch immer so möglich ist, wie mit einem Textinput, ist ein anderes mögliches Problem Deiner Idee.
Liebe Grüße
Felix Riesterer
Hallo pl,
Idee: ersetze <input> durch <textarea> und schon ist das Problem gelöst
Nein, dann entsteht ein unerwünschter Zeilenumbruch.
Bis demnächst
Matthias
Hallo Matthias,
Nein, dann entsteht ein unerwünschter Zeilenumbruch.
Angenommen, ich schreibe diesen Wert in ein varchar-Feld. Kann das einen Zeilenumbruch beinhalten?
Ist aber für mich kein Problem, da ich Eingabewerte immer schon mit trunc() beschneide.
Hallo
Nein, dann entsteht ein unerwünschter Zeilenumbruch.
Angenommen, ich schreibe diesen Wert in ein varchar-Feld. Kann das einen Zeilenumbruch beinhalten?
In der Datenbank? Ja.
Tschö, Auge