Formular per JS absenden
bearbeitet von PitHi Gunnar,
> Zum Gruppieren von Eingabefeldern gibt es das `fieldset`-Element.
>
> Damit hat man die Zugehörigkeit – und zwar schon im Markup.
>
> Man kann alles in ein Formular tun, und das, was Pit „zwei Formulare“ nannte, sind zwei `fieldset`s in dem einen Formular.
>
Nicht ganz.
Ich nutze durchaus fieldsets. Aber ich habe tatsächlich (quasi) 2 Formulare mit jeweils einigen Fieldsets.
Hätte ich gewußt, dass man die auf "disabled" setzen kann und deren values dann nicht übermittelt werden, hätte ich das gerne genutzt.
Ich habe es jetzt so gemacht, dass alle Formularwerte übermittelt werden und zudem ein Wert, der mir serverseitig anzeigt, welche Werte für mich relevant sind. Der Rest ist dann zwar auch übermittelt worden, wird aber nicht ausgewertet.
Mal schauen, ob ichs noch ändere, soviel Arbeit ist es nicht, die unnötigen fieldsets zu disablen.
Pit
> > und verarbeitet je nach Sichtbarkeit (die man über den name des Submitbutton steuern kann - dieses Attribut ist nicht schreibgeschützt) die einen oder die anderen Felder.
>
> Was genau meinst du mit „verarbeitet“?
>
> Die Werte aus den Eingabefeldern in dem nicht ausgewählten `fieldset` (bzw. in den nicht ausgewählten `fieldset`s) sollen nicht übertragen werden. Das erreicht man, indem man alle `fieldset`s bis auf das auserwählte auf `disabled` setzt.
>
> Was die Sichtbarkeit betrifft: das hört sich für mich nach Tabs an. Heydon Pickering zeigt in seinen [Inculsive Components](https://inclusive-components.design), wie [Tabbed Interfaces](https://inclusive-components.design/tabbed-interfaces/) umgesetzt werden. Ohne JavaScript ist alles sichtbar; wenn JavaScript ausgeführt wird, werden die für Tabs und Tabpanels vorgesehenen `role`-Attribute gesetzt und die Umschaltung mit `aria-selected`- und `hidden`-Attributen vorgenommen.
>
> Ich hab das mal [nachgebaut](https://codepen.io/gunnarbittersmann/pen/GOzqdR?editors=0010) und dabei – glaube ich – das JavaScript noch etwas vereinfacht.
>
> Hinzukommt – wie gesagt – dass die nicht benötigten `fieldset`s nicht nur auf `hidden`, sondern auch auf `disabled` gesetzt werden.
>
> LLAP 🖖
>
> PS. Anstatt Eventhandler für jedes Tab zu registrieren, könnte man auch einen für alles registrieren und *event delegation*{:@en} verwenden. Ich hab das unten für das `click`-Event mal angedeutet.
> --
> “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)