Formular per JS absenden
bearbeitet von Gunnar Bittersmann@@Rolf B
> Oder man legt beide Forms zu einem zusammen, benennt die Felder so dass die Zugehörigkeit erkennbar ist
??
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.
> 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)