Linuchs: HTML-Formular nur bei Klick auf button abschicken

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

  1. 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

    1. 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

      1. @@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 buttons. Deshalb gilt – Trommelwirbel – der Defaultwert.

        LLAP 🖖

        --
        „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
        „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

        —Marc-Uwe Kling
        1. 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

          1. @@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 🖖

            --
            „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
            „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

            —Marc-Uwe Kling
            1. 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

              1. @@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 🖖

                --
                Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.
                1. Hallo Gunnar,

                  🤔 Was mach ich falsch?

                  du unterstellst, dass in einem Kommentar von pl etwas Sinnvolles stecken müsste.

                  *scnr*,
                   Martin

                  --
                  Ich stamme aus Ironien, einem Land am sarkastischen Ozean.
                  1. @@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 🖖

                    --
                    Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.
                2. 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

                  1. @@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 🖖

                    --
                    Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.
                    1. 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

                      1. lösen wir die inhaltlichen Beschränkungen des Forums nun über Signaturen?

                        DER darf das. Ist einer meiner Lieferanten 😉

                        --
                        Palästina war der Deal für den Dawesplan.
                      2. @@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 🖖

                        --
                        Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.
                        1. 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

  2. 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

    1. 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

      1. 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

        1. 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

          --
          Ich stamme aus Ironien, einem Land am sarkastischen Ozean.
          1. 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

            --
            Du kannst das Projekt SELFHTML unterstützen,
            indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
            1. @@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.

              Spielwiese

              LLAP 🖖

              --
              „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
              „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

              —Marc-Uwe Kling
            2. 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

              --
              Ich stamme aus Ironien, einem Land am sarkastischen Ozean.
          2. 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?”

  3. Das liegt ja auch nicht am Button. Vielmehr ist submit ein Event was man am <form> selbst abfangen muss. MFG

    1. @@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 🖖

      --
      „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
      „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

      —Marc-Uwe Kling
      1. 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.

        1. 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

  4. Idee: ersetze <input> durch <textarea> und schon ist das Problem gelöst

    .

    1. 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

    2. danke, werde ich testen.

    3. 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

      --
      Du kannst das Projekt SELFHTML unterstützen,
      indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
      1. 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.

        1. 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

          --
          Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
          Hohle Köpfe von Terry Pratchett