nicht angemeldet dedlfix
dedlfix
Gunnar Bittersmann
dedlfix
dedlfix
Gunnar Bittersmann
Rolf B
Matthias Apsel
Rolf B
Matthias Apsel
Gunnar Bittersmann
Rolf B
Hallo,
ich habe die Frage, ob miene Vorgehensweise grundsätzlich korrekt ist, denn sie funktioniert derzeit nicht.
Ich habe 2 Formulare auf einer Seite, die jeweils eine ID besitzen. Nun habe ich einen Absendebutton, der in Abhängigkeit eines anderen "Schalters" eine ID, bzw. eine andere ID besitzt. Dieser Absendebutton ist mit einem Eventhandler versehen, der im onclick-event das eine- oder andere Formular absenden soll. Er sendet aber imme rnur das erste Formular.
Lasse ich mir beim Klick die ID ausgeben, zeigt er mir tatsächlich entweder die erste oder die 2. ID, bis hierhin funktioniert es also.
Aber ab hier wird trotzdem immer nur Form1 abgesendet:
$('#myS').on('click', function(){
console.log(this.id); // wird korrekt myS ausgegeben
$("#Form1").submit();
});
$('#myK').on('click', function(){
console.log(this.id); // wird korrekt myK ausgegeben
$("#Form2").submit();
});
Ist die Vorgehensweise korrekt? und wenn ja: Wie debugge ich das?
Pit
Tach!
Lasse ich mir beim Klick die ID ausgeben, zeigt er mir tatsächlich entweder die erste oder die 2. ID, bis hierhin funktioniert es also.
Das ist noch nicht zwingend ein Beweis, dass an der Stelle dieses console.log() aufgerufen wurde. Breakpoints sind die bessere Wahl, um zu kontrollieren, ob man an einem bestimmten Punkt im Code vorbeikommt.
dedlfix.
Hallo dedlfix,
Das ist noch nicht zwingend ein Beweis, dass an der Stelle dieses console.log() aufgerufen wurde. Breakpoints sind die bessere Wahl, um zu kontrollieren, ob man an einem bestimmten Punkt im Code vorbeikommt.
Das kenne ich nicht. Kannst Dus mir erklären oder hast einen (deutschsprachigen) Link für mich?
Pit
Tach!
Das ist noch nicht zwingend ein Beweis, dass an der Stelle dieses console.log() aufgerufen wurde. Breakpoints sind die bessere Wahl, um zu kontrollieren, ob man an einem bestimmten Punkt im Code vorbeikommt.
Das kenne ich nicht. Kannst Dus mir erklären oder hast einen (deutschsprachigen) Link für mich?
Hab ich nicht. Aber die Konsole kennst du ja bereits. Und da nebenan ist der Debugger zu finden. Da musst du das richtige Script finden. Breakpoints setzt man, indem man auf die Zeilennummer klickt.
Dein Problem ist - das wirst du mit den Breakpoints sehen - der Klick landet im falschen Eventhandler. Der Eventhandler wird dem Button zugewiesen und bleibt da. Der wechselt nicht zum anderen, wenn du dessen ID änderst.
dedlfix.
Hi dedlfix,
Das kenne ich nicht. Kannst Dus mir erklären oder hast einen (deutschsprachigen) Link für mich?
Hab ich nicht. Aber die Konsole kennst du ja bereits. Und da nebenan ist der Debugger zu finden. Da musst du das richtige Script finden. Breakpoints setzt man, indem man auf die Zeilennummer klickt.
Muß ich mich unbedingt mit befassen. Ich hab sowas ansatzweise mal in Java mit dem Eclipsedebugger gemacht, aber m it JS noch nie.
Dein Problem ist - das wirst du mit den Breakpoints sehen - der Klick landet im falschen Eventhandler. Der Eventhandler wird dem Button zugewiesen und bleibt da. Der wechselt nicht zum anderen, wenn du dessen ID änderst.
Hm...schade, aber ja, das habe ich gemerkt… danke für die Erklärung und den Hiweis auf Brakepoints.
Pit
@@Pit
Nun habe ich einen Absendebutton, der in Abhängigkeit eines anderen "Schalters" eine ID, bzw. eine andere ID besitzt. […] Ist die Vorgehensweise korrekt?
Nein.
Ein Button (gilt genauso für beliebige andere Elemente) hat eine unveränderliche ID. In Abhängigkeit von anderen Schaltern können sich andere Eigenschaften des Buttons ändern, aber nicht seine ID.
Oder bist du plötzlich ein anderer Mensch, wenn du dir die Haare färbst?
LLAP 🖖
Hi Gunnar,
Ein Button (gilt genauso für beliebige andere Elemente) hat eine unveränderliche ID. In Abhängigkeit von anderen Schaltern können sich andere Eigenschaften des Buttons ändern, aber nicht seine ID.
Aha? Ich hatte gelesen, das ginge wie folgt:
$('#test').on('click', function(){
$('#myS').attr('id','myK');
});
Gibt es denn eine andere Möglichkeit, mit einem Button wahlweise eines von 2 Formularen absenden zu können?
Pit
Tach!
Gibt es denn eine andere Möglichkeit, mit einem Button wahlweise eines von 2 Formularen absenden zu können?
Ob ein Button der Auslöser ist, ist dem Formular egal. Was auch immer du zur Entscheidung nimmst, wie du den Button benennst, kannst du prinzipiell auch dafür nehmen das eine oder das andere Formular zu wählen und dieses dann abzuschicken.
dedlfix.
Hi,
Ob ein Button der Auslöser ist, ist dem Formular egal. Was auch immer du zur Entscheidung nimmst, wie du den Button benennst, kannst du prinzipiell auch dafür nehmen das eine oder das andere Formular zu wählen und dieses dann abzuschicken.
Nicht wirklich. Denn die Entscheidung zur Bennenung des Buttons nehme ich zu einem Zeitpunkt vor, an dem der User das neue Formular erstmalig sieht. Da will ich das ja noch gar nicht absenden…
Pit
Tach!
Ob ein Button der Auslöser ist, ist dem Formular egal. Was auch immer du zur Entscheidung nimmst, wie du den Button benennst, kannst du prinzipiell auch dafür nehmen das eine oder das andere Formular zu wählen und dieses dann abzuschicken.
Nicht wirklich. Denn die Entscheidung zur Bennenung des Buttons nehme ich zu einem Zeitpunkt vor, an dem der User das neue Formular erstmalig sieht. Da will ich das ja noch gar nicht absenden…
Du kannst dir den zur Entscheidungsfindung wichtigen Wert auch irgendwo merken. Es muss nicht die ID des Buttons sein. Zur Not gibt es auch globale Variablen, aber wirklich nur zur Not. Und HTML-Elemente haben auch noch Möglichkeiten zur Datenspeicherung, irgendwas mit data im Namen.
dedlfix.
@@Pit
Gibt es denn eine andere Möglichkeit, mit einem Button wahlweise eines von 2 Formularen absenden zu können?
Man kann Formulare auch anders abschicken als durch Drücken des Submit-Buttons. Und dann?
Warum hat nicht jedes Formular seinen Submit-Button?
Warum JavaScript? Und was passiert ohne JavaScript?
LLAP 🖖
Hallo Pit,
Gunnars Nr. 2 ist die entscheidende Frage. Welches Problem willst Du mit deinen Zwillingsformularen lösen? Vermutlich könnte man hier ansetzen und eine alternative Architektur finden, die zum Programmiermodell Web besser passt.
Rolf
Hallo Pit,
Gunnars Nr. 2 ist die entscheidende Frage. Welches Problem willst Du mit deinen Zwillingsformularen lösen? Vermutlich könnte man hier ansetzen und eine alternative Architektur finden, die zum Programmiermodell Web besser passt.
Hallo Rolf,
ja, Du hast Recht, das ist genau des Pudels Kern.
Es geht um Folgendes:
Mein Kalender macht beim Klick auf einen Termin ein Fenster zum editieren auf. Dieses Fenster hat eine eigene Iconleiste, ein Icon ist ein "Speicher-Icon". Beim Klick dauf wird das Formular "Form1" abgesendet. Unter gewisen Umständen möchte ich dem User ein anderes Formular ins Fenster setzen, was ich durch Klick auf ein anderes Icon der Iconleiste erreiche.
Und der Clou ist, dass auch dieses Formular über das "Speicher-Icon" abgeschickt werden soll.
Pit
Hallo Pit,
Und der Clou ist, dass auch dieses Formular über das "Speicher-Icon" abgeschickt werden soll.
Das form-Attribut existiert. Vielleicht ist das ja was für dich.
Bis demnächst
Matthias
Hallo Matthias,
hier spricht die Spec:
interface HTMLButtonElement : HTMLElement {
attribute boolean autofocus;
attribute boolean disabled;
readonly attribute HTMLFormElement? form;
attribute DOMString formAction;
attribute DOMString formEnctype;
attribute DOMString formMethod;
attribute boolean formNoValidate;
attribute DOMString formTarget;
attribute DOMString name;
attribute DOMString type;
attribute DOMString value;
readonly attribute boolean willValidate;
readonly attribute ValidityState validity;
readonly attribute DOMString validationMessage;
boolean checkValidity();
void setCustomValidity(DOMString error);
readonly attribute NodeList labels;
};
==> Geht nicht.
Was man machen könnte, aber keinesfalls sollte, wäre ein Button der auf dem aktiven Form die submit() Methode aufruft. Damit geht aber die Verbindung Form - Submitbutton verloren, insbesondere das standardmäßige Behandeln der ENTER Taste für Submit.
Es wäre vermutlich besser, den Submitbutton aus der Iconleiste herauszuholen und je einen eigenen Button auf das jeweilige Form zu legen. Alternativ könnte man ihn auch mit position:absolute aus dem Form in die Iconleiste verschieben, das dürfte aber die responsiveness massiv erschweren.
Oder man legt beide Forms zu einem zusammen, benennt die Felder so dass die Zugehörigkeit erkennbar ist, 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.
Rolf
Hallo Rolf,
Oder man legt beide Forms zu einem zusammen, benennt die Felder so dass die Zugehörigkeit erkennbar ist, 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.
Ich denke, genau darauf wird es hinauslaufen. Das hatte ich mir auch schon als "Fallback" überlegt, um bei der Ein-Button-Lösung bleiben zu können.
Pit
moin Rolf,
Oder man legt beide Forms zu einem zusammen, benennt die Felder so dass die Zugehörigkeit erkennbar ist, 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.
Das ist die übliche Vorgehensweise. Man legt sog. Schlüsselparameter fest welche über eine serverseitige Parameterkontrollstruktur den serverseitigen Ablauf steuern. Das ist zum Einen unabhängig davon ob die Anwendung mit JS gestützt ist und es ist zum Anderen die Voraussetzung dafür, die Anwendung bedarfsweise mit JS anreichern zu können. MfG
Hallo Rolf B,
hier spricht die Spec:
==> Geht nicht.
Geht nicht gibts nicht.
Firefox und Chrome tun es http://selfhtml.apsel-mv.de/test/form-attribut.html, IE und Edge nicht. Edge 16 soll es können können.
Bis demnächst
Matthias
@@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 fieldsets 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 fieldsets) sollen nicht übertragen werden. Das erreicht man, indem man alle fieldsets 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, wie 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 und dabei – glaube ich – das JavaScript noch etwas vereinfacht.
Hinzukommt – wie gesagt –, dass die nicht benötigten fieldsets 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 verwenden. Ich hab das unten für das click-Event mal angedeutet.
Hi 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
fieldsets 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
@@Pit
Man kann alles in ein Formular tun, und das, was Pit „zwei Formulare“ nannte, sind zwei
fieldsets in dem einen Formular.Nicht ganz. Ich nutze durchaus fieldsets. Aber ich habe tatsächlich (quasi) 2 Formulare mit jeweils einigen Fieldsets.
Man kann fieldsets auch schachteln.
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.
Von hinten durch die Brust ins Auge.
LLAP 🖖
Hi Gunnar,
Man kann
fieldsets auch schachteln.
...wäre meine nächste Frage gewesen 😀
Mal schauen, vielleicht bau ichs noch um.
Pit
Hallo Gunnar,
fieldset und disabled - tja. Hätte mir präsent sein sollen. Danke.
Rolf
Hi,
Und der Clou ist, dass auch dieses Formular über das "Speicher-Icon" abgeschickt werden soll.
Das form-Attribut existiert. Vielleicht ist das ja was für dich.
Wenn der Anwender nur ein Formular im Browser hat ist das so ziemlich nutzlos 😉
Hallo pl,
Wenn der Anwender nur ein Formular im Browser hat ist das so ziemlich nutzlos 😉
Aus dem OP: „Ich habe 2 Formulare auf einer Seite, die jeweils eine ID besitzen.“
Bis demnächst
Matthias
Hi Matthias,
natürlich darf man auch 2 und mehr Formulare im Browser haben. Aber es ist ziemlich ungeschickt, das Absenden über einen gemeinsamen Button abwickeln zu wollen. Sowas würde ich nicht einmal für mich selbst herrichten da ich mir nach jedem Klick tagelang die Frage stellen würde, welches der ungezählten Formulare dabei abgesendet wurde (Flaschenpostsyndrom) 😉
Schönen Sonntag.
Hi Pit,
Also daß der Benutzer nur ein Formular im Broser hat, ist schonmal der richtige Weg. Idealerweise wird das Formular über ein Template erstellt womit bestimmte Platzhalter austauschbar sind. z.B. die Beschriftung des Absende-Button und auch dessen name/value. Letzeres erzeugt im Submit/Request genau diejenigen Parameter, welche serverseitig notwendig sind um bestimmte Aktionen auszulösen.
Also eben nicht das action-Attribut ändern wie das hier laufend empfohlen wird, sondern über Schlüsselparameter den Ablauf steuern und dabei auf dem selben URL arbeiten.
Dieser bewährte Grundsatz der Webprogrammierung ist unabhängig davon ob er JS gestützt ist. MfG
Hi Gunnar,
- Warum hat nicht jedes Formular seinen Submit-Button?
Klar, das wäre möglich... aber ich würde es jetzt mal gerne anders machen und etwas Neues dabei lernen.
- Warum JavaScript? Und was passiert ohne JavaScript?
Es geht um einen begrenzten und bekannten Userkreis, in dem ich JS voraussetzen darf.
Pit
@@Pit
aber ich würde es jetzt mal gerne anders machen und etwas Neues dabei lernen.
Das ist löblich. Das Neue sollte aber auch sinnvoll sein. Nur weiß man das oft erst hinterher.
Es geht um einen begrenzten und bekannten Userkreis, in dem ich JS voraussetzen darf.
Nein. Darfst du nicht.
“While it’s tempting to think that only a small minority of visitors will miss out on a site’s JavaScript, the truth is that everybody is a non‐JavaScript user until the JavaScript has finished loading ...if the JavaScript finishes loading. Flaky connections, interfering network operators, and unpredictable ad‐blocking software can torpedo the assumption that JavaScript will always be available.
“The problem is not with people deliberately disabling JavaScript in their browsers. Although that’s a use case worth considering, it’s not the most common cause of JavaScript errors.”
—Jeremy Keith, Resilient web design, Chapter 4
Warst du der mit dem nicht so guten Englisch? Ich übersetze das mal eben:
„Man ist geneigt anzunehmen, dass nur bei einer kleinen Minderheit der Besucher das JavaScript einer Website nicht ausgeführt wird; in Wahrheit aber ist jeder Nutzer ohne JavaScript, solange das JavaScript nicht fertig geladen ist … wenn das JavaScript denn überhaupt je fertig geladen wird. Instabile Verbindungen, eingreifende Netzwerkoperatoren und unberechenbare Werbeblocker können die Annahme zunichtemachen, dass JavaScript immer verfügbar ist.
Das Problem sind nicht die Leute, die bewusst JavaScript in ihrem Browser deaktivieren. Wenngleich das auch beachtet werden sollte, das ist beileibe nicht die Hauptursache für JavaScript-Fehler.“
Insbesondere unberechenbare Werbeblocker sind nicht zu unterschäten. Oder anderes eingebundenes fremdes JavaScript, das die Ausführung des eigenen JavaScripts verhindert (Beispiel aus der Praxis).
TL;DR: Es ist nie eine gute Idee, die Ausführung JavaScript vorauszusetzen.
LLAP 🖖
Hi Gunnar,
Es geht um einen begrenzten und bekannten Userkreis, in dem ich JS voraussetzen darf.
Nein. Darfst du nicht.
Ok, Du unterscheidest zwischen technisch voraussetzen und gem. vereinbarter Nutzungsbedingungen voraussetzen. Das zweite kann ich beeinflussen, das erste ggf. nicht.
Warst du der mit dem nicht so guten Englisch? Ich übersetze das mal eben:
Meganett von Dir! Danke dafür.
*„Man ist geneigt anzunehmen, dass nur bei einer kleinen Minderheit der Besucher das JavaScript einer Website nicht ausgeführt wird; in Wahrheit aber ist jeder Nutzer ohne JavaScript, solange das JavaScript nicht fertig geladen ist … wenn das JavaScript denn überhaupt je fertig geladen wird. Instabile Verbindungen, eingreifende Netzwerkoperatoren und unberechenbare Werbeblocker können die Annahme zunichtemachen, dass JavaScript immer verfügbar ist.
Insbesondere unberechenbare Werbeblocker sind nicht zu unterschäten. Oder anderes eingebundenes fremdes JavaScript, das die Ausführung des eigenen JavaScripts verhindert (Beispiel aus der Praxis).
Wieder was gelernt, dank Dir.
Aber auch hier kann ich voraussetzen, dass mein JS da Einzige der Seite ist. Da gibt es weder Werbeblocker, noch Fremdscripte, die ihr Unwesen treiben.
Pit
@@Pit
Es geht um einen begrenzten und bekannten Userkreis, in dem ich JS voraussetzen darf.
Everyone has JavaScript, right?
LLAP 🖖
Hi @Gunnar Bittersmann ,
meine Backends mache ich nur mit JS das ist viel einfacher zu Programmieren als bei jeder Aktion ne neue Seite in den Browser zu laden. Sogar die Fehlerbehandlung ist einfacher zu programmieren, die wird, da sie nur serverseitig erfolgt, über einen gesonderten HTTP Status zurück zum Client durchgereicht und dort zur Anzeige gebracht.
Diese Backends sind nur für mich bestimmt, niemand außer mir benutzt diese, das habe ich höchst persönlich festgelegt und das hat auch kein Anderer zu bestimmen. Und ich werde mir niemals anmaßen wollen, Andere ständig darauf hinzuweisen, dass Anwendungen auch ohne JS funktionieren müssen. Daß ne JS basierte Anwendung ohne JS nicht funktioniert, dürfte sich, nachdem sich Webentwicklung in den letzten 20 Jahren mittlerweile zum Volkssport entwickelt hat, ja nun einschlägig herumgesprochen haben.
Schönen Sonntag 😉
Hi,
Gibt es denn eine andere Möglichkeit, mit einem Button wahlweise eines von 2 Formularen absenden zu können?
Bestimmt gibt es. Aber egal wie sie aussieht, sie wäre niemals zweckmäßig. MfG