Dag: Welcher Button wurde geklickt

Ein Form, mehrere Buttons. Alle Buttons sind type submit und haben jeweils ein name= und value= Atribute. Der Browser übermittelt name+value nur für den Button, welcher geklickt wurde, d.h., nur der geklickte Button taucht namentlich in der Parameterliste auf.

Mit Javascript sieht das anders aus, zumindest mit der Funktion, welche ich zum Auslesen der Formelemente erstellt habe, da werden grundsätzlich alle name+value-Paare übermittelt, egal, welcher Button geklickt wurde.

Es müsste also mit JS festgestellt werden, welcher B. geklickt wurde. Idealerweise so, dass nicht alles umgeschrieben werden muss, d.h., das fallback zum submit muss ohne Weiteres sichergestellt sein.

Idee??? Mir will grad mal nix einfallen ( wie so oft ). Evntl. gibts ja auch eine JS-lib, wo sich ganz genauso verhält wie ein native Browser. Da würde mich mal interessieren, wie die das gemacht haben.

Dag

  1. Hallo und guten Morgen,

    Ein Form, mehrere Buttons. Alle Buttons sind type submit und haben jeweils ein name= und value= Atribute. Der Browser übermittelt name+value nur für den Button, welcher geklickt wurde, d.h., nur der geklickte Button taucht namentlich in der Parameterliste auf.

    Dann willst Du keine Buttons, sondern Radio-Elemente-Paare oder Checkboxen, die Du Dir von Gunnar mittels CSS in genialer Weise zu einem Keyboard oder zu Buttons oder zu fliegenden Vögeln oder was auch immer umformen lässt. DER hat hier schon Sachen abgeliefert, da staune ich heute noch, dass das geht.

    Siehe Archiv. Ich weiß nicht, wie man da suchen kann.

    Und dann kannst Du auch auf das JavaScript verzichten, we sei denn, die Übermittlung soll auch mit AJAX stattfinden, wenn es geht.

    Grüße
    TS

    1. Hallo und guten Morgen,

      Ein Form, mehrere Buttons. Alle Buttons sind type submit und haben jeweils ein name= und value= Atribute. Der Browser übermittelt name+value nur für den Button, welcher geklickt wurde, d.h., nur der geklickte Button taucht namentlich in der Parameterliste auf.

      Dann willst Du keine Buttons, sondern Radio-Elemente-Paare oder Checkboxen,

      Nene, ich weiß schon genau was Kd. will. Konkret liegt das Form bereits fix&fertig vor und ist funktional über ein ganz normales Submit. Es soll nun erweitert werden, so dass nur eine minimale Änderung erforderlich ist, die im Wesentlichen darin besteht, onSubmit="return false" zu notieren und einen <script>-Abschnitt anzuhängen. Als eine JS-Erweiterung mit Fallback.

      Die eigentliche Lösung besteht darin, die Zuständigkeit, dass nur vom geklickten Button name+value übertragen wird, in genau die Funktion zu legen, welche die Formulareingaben serialisiert. Dazu bekommt diese Funktion als Parameter übergeben: -den Formularindex (zb formindex => 0 verweist auf das erste Form im Dokument), -name+value des buttons, welcher geklickt wurde (zb feststellbar über event.target).

      Done

  2. Servus!

    Es müsste also mit JS festgestellt werden, welcher B. geklickt wurde.

    Mit event.target?

    Dag

    Schönes Wochenende

    Matthias Scharwies

    1. Servus!

      Mit event.target?

      Ja, gut, damit kann ich mir was bauen. Btw., wer's mit

      FormData( document.getElementById('myform') ) machen will:

      Im Request sind gar keine name/value von Form-Elementen mit type="submit" enthalten. Die Entwickler von FormData haben es sich hier besonders einfach gemacht, "anstatt was Falsches zu senden, senden wir lieber gar nichts" ;)

      Schönen Sonntag

  3. @@Dag

    Ein Form, mehrere Buttons. Alle Buttons sind type submit und haben jeweils ein name= und value= Atribute. Der Browser übermittelt name+value nur für den Button, welcher geklickt wurde, d.h., nur der geklickte Button taucht namentlich in der Parameterliste auf.

    Und wenn gar kein Button geclickt wurde, sondern das Formular per Enter-Taste abgeschickt wurde?

    Mehrere Submit-Buttons sind eher selten eine gute Idee.

    LLAP 🖖

    --
    Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
    1. @@Dag

      Ein Form, mehrere Buttons. Alle Buttons sind type submit und haben jeweils ein name= und value= Atribute. Der Browser übermittelt name+value nur für den Button, welcher geklickt wurde, d.h., nur der geklickte Button taucht namentlich in der Parameterliste auf.

      Und wenn gar kein Button geclickt wurde, sondern das Formular per Enter-Taste abgeschickt wurde?

      Der Browser schnappt sich den ersten Butten mit type="submit" und sendet dessen name/value im Request. Der anderen Butten name/value-Paare werden auch in diesem Fall nicht gesendet.

      Mehrere Submit-Buttons sind eher selten eine gute Idee.

      Selten aber dämlich war nicht die Frage ;)

    2. Hallo Gunnar Bittersmann,

      Mehrere Submit-Buttons sind eher selten eine gute Idee.

      Dennoch manchmal sinnvoll. http://wiki.selfhtml.org/wiki/HTML/Formulare/Button#formnovalidate

      Bis demnächst
      Matthias

      --
      Signaturen sind bloed (Steel) und Markdown ist mächtig.
      1. Hallo Gunnar Bittersmann,

        Mehrere Submit-Buttons sind eher selten eine gute Idee.

        Dennoch manchmal sinnvoll. http://wiki.selfhtml.org/wiki/HTML/Formulare/Button#formnovalidate

        Nicht selten gibt es Formulare zu entwickeln, da sind mehrere Submit-Buttons die einzig sinnvolle Möglichkeit. Wer allerdings mit Parameter-Kontrollstrukturen nicht richtig umgehen kann, sollte die Finger von Sowas lassen ;)

    3. halo,

      Mehrere Submit-Buttons sind eher selten eine gute Idee.

      Zeit für ein Beispiel:

      1 Form, 2 Eingabefelder, 4 Submitbuttons für die 4 Grundrechenarten (mal, plus, minus, durch), 1 Feld fürs Ergebnis.

      Wir werden doch nicht etwa 4 Formulare dafür brauchen, wo dann der Benutzer seine 2 Zahlen jedesmal neu eingeben muss.

      Dennoch gibt es eine interessante Alternative: 1 Eingabefeld für den zu berechnenden Ausdruck (zb 123.99 * 3.5 oder 4 + 6 oder 3 : 8...) und 1 Submitbutton.

      Damit ergeben sich u.U. sehr benutzerfreundliche Formulare, insbesondere dann, wenn der Cursor im Eingabefeld verbleibt (für mehrere Kalkulationen in Folge). Bitte nicht mit eval drauf losgehen, sondern einen Parser aufsetzen, damit kein Code eingeschleust werden kann.

      Dag

      1. Hallo

        Mehrere Submit-Buttons sind eher selten eine gute Idee.

        1 Form, 2 Eingabefelder, 4 Submitbuttons für die 4 Grundrechenarten (mal, plus, minus, durch), 1 Feld fürs Ergebnis.

        1 Formular, 2 Texteingabefelder, 4 Radiobuttons für die 4 Grundrechenarten [1], 1 Submitbutton. Das Ergebnisfeld muss nicht zwingend ein Formularfeld sein. Mit JS oder gar serverseitg kann das Ergebnis sonstwo reingeschrieben werden. Macht Summa Summarum drei Eingaben. Das ist mMn noch übersichtlich genug.

        Dennoch gibt es eine interessante Alternative: 1 Eingabefeld für den zu berechnenden Ausdruck (zb 123.99 * 3.5 oder 4 + 6 oder 3 : 8...) und 1 Submitbutton.

        Das wäre an sich™ das Sinnvollste, wenn da nicht die unterschiedlichen Notationen [2] wären. Die möchte ich nicht berücksichtigen müssen. Ein paar wenige gängige Notationen zu unterstützen und andere schlicht zurückzuweisen ginge ja noch, aber speziell im mathematischen Bereich ist mir die Vielfalt zu unübersichtlich.

        Tschö, Auge

        --
        Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
        Terry Pratchett, „Gevatter Tod“

        1. Die müssen nicht wie Radiobuttons aussehen. Man kann sie unsichtbar machen und stattdessen ihre Label passend gestalten und zur Bedienung nutzen. Gunnar hat da diverse Beispiele erstellt (dazu bitte die Suche benutzen). ↩︎

        2. Beispiele: 3 : 8 vs. 3 / 8 (evtl. vs. 3/8 oder 3:8) ↩︎

        1. Hallo Auge,

          1 Formular, 2 Texteingabefelder, 4 Radiobuttons für die 4 Grundrechenarten [^1], 1 Submitbutton.

          kein Submit-, ein Buttonbutton. Ich wäre allerdings für deren 4. Macht einen Klick weniger.

          Bis demnächst
          Matthias

          --
          Signaturen sind bloed (Steel) und Markdown ist mächtig.
          1. Hallo

            1 Formular, 2 Texteingabefelder, 4 Radiobuttons für die 4 Grundrechenarten [^1], 1 Submitbutton.

            kein Submit-, ein Buttonbutton.

            Für Spielereien: ja. Für Sachen, die auch ohne JS funktionieren müssen: nein.

            Ich wäre allerdings für deren 4. Macht einen Klick weniger.

            Dann sollte man die Reihenfolge der Eingabe (auch optisch) anpassen. Erste Zahl, zweite Zahl, schlussendlich die Rechenart als Auslöser der Berechnung.

            Tschö, Auge

            --
            Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
            Terry Pratchett, „Gevatter Tod“
            1. Ihr seid viel zu sehr auf das Beispiel fixiert. Aber vielen Dank fürs Engagement!

              Es gibt noch ganz andere und vielfältigere Aufgabenstellungen wo mehrere <button> sinnvoll sind. Mit oder ohne JS/Ajax-Unterstützung. Idealerweise so, dass die Anwendung bei abgestelltem JS spontan in den regulären CGI-Betrieb wechselt. Und auch so, dass Formulare unter allen Umständen auch ohne JS funktionieren, auch dann wenn nur ein 2 + 3 zu rechnen ist.

              Was draußen aufgestellt wird, das entscheidet der Kunde. Und nicht derjenige, der's besser kann oder denkt dass er's besser kann ;)

              Dag

              1. @@Dag

                Es gibt noch ganz andere und vielfältigere Aufgabenstellungen wo mehrere <button> sinnvoll sind.

                Das hat niemand infragegestellt. Die Frage ist, ob mehrere Submit-Buttons sinnvoll sind.

                Was draußen aufgestellt wird, das entscheidet der Kunde.

                Nein. Der Kunde sagt, was er für Ansprüche hat. Wie diese technisch umgesetzt werden, entscheidet der Webentwickler. Ansonsten bräuchte der Kunde den Webentwickler ja nicht.

                Und nicht derjenige, der's besser kann oder denkt dass er's besser kann ;)

                Doch.

                LLAP 🖖

                --
                Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
      2. Hallo Dag,

        4 Submitbuttons für die 4 Grundrechenarten

        Nö, 4 button-Buttons.

        Bis demnächst
        Matthias

        --
        Signaturen sind bloed (Steel) und Markdown ist mächtig.
      3. @@Dag

        Zeit für ein Beispiel:

        1 Form, 2 Eingabefelder, 4 Submitbuttons für die 4 Grundrechenarten (mal, plus, minus, durch), 1 Feld fürs Ergebnis.

        Wir werden doch nicht etwa 4 Formulare dafür brauchen, wo dann der Benutzer seine 2 Zahlen jedesmal neu eingeben muss.

        Wir werden doch nicht etwa die Berechnung zum Server schicken und den Nutzer sekundenlang auf das Ergebnis warten lassen. Die Aufgabe sollte man (auf dem) Client (ü)be(r)lassen.

        Kein Formular, kein Submit-Button.

        Wenn du dir schon ein Beispiel aus den Fingern saugst, dann doch bitte ein wenigstens halbwegs sinnvolles.

        LLAP 🖖

        --
        Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
        1. hallo,

          das Festlegen von Schlüsselparametern zum Steuern von Webanwendungen gehört seit eh und je zu den grundsätzlichen Aufgaben eines Webanwendungsentwicklers. Dabei ist es unerheblich, ob diese speziellen Parameter an Buttons (POST oder GET und unabhängig vom Enctype eines Form) oder an QUERY_STRINGs in href-Attributen gebunden sind.

          Die Frage "welcher button wurde geklickt" ist abstrakt gesehen gleichbedeutend mit der Frage "welcher link geklickt" wurde.

          Dag

          PS: jQuery.serialize() übernimmt keine name/value von Elementen type="submit".

          1. @@Dag

            Die Frage "welcher button wurde geklickt" ist abstrakt gesehen gleichbedeutend mit der Frage "welcher link geklickt" wurde.

            Da muss man aber sehr stark abstrahieren bis das gleichbedeutend ist.

            Buttons lösen Aktionen aus, Links führen zu anderen Ressourcen.

            LLAP 🖖

            --
            Ist diese Antwort anstößig? Dann könnte sie nützlich sein.