Frage zum Wiki-Artikel „Formulare“

[Seifried]

Hallo, ich suche nach ein Formularlösung die ohne php und damit lokal funktioniert. Es sollte eine Texteingabe sein, die am besten "onchange" die Texteingabe als dateinamen benutzt, um damit eine Grafik/ein Bild in einer festgelegten URL+dateinamen in der Seite anzeigt. Geht sowas? Ich hab mir die Finger wund recherchiert und ich finde keinen Ansatz. Besten Dank und gute Nacht, Seifried

[Henry]

Hallo Seifried,

Kommt drauf an was genau du meinst. Dass ein Bild angezeigt wird, weil du den Dateinamen schreibst? Klar das wäre kein Ding. Willst du aber auch das dies abgespeichert wird, wird's schon eher problematisch. Was genau ist dein Begehr? Oder kannst du was zeigen bzw. oder vielleicht eine Seite wo du so etwas(was du haben möchtest) schon mal gesehen hast?

Gruss
Henry

[Seifried]

Grüß Dich Henry - Dank Dir für Deine Hilfe! Etwas weiter unten hat der Rolf offensichtlich schon was vorbereitet, das beim ersten drüber schaun dem schon sehr nahe kommt: https://jsfiddle.net/s9yw2csf/. das ist es von der Funktion her schon fast. Es müsst nur statt dem Dropdown ein Textfeld sein, wo man wirklich den Dateinamen reinschreibt.

[beatovich]

hallo

ich suche nach ein Formularlösung die ohne php und damit lokal funktioniert. Es sollte eine Texteingabe sein, die am besten "onchange" die Texteingabe als dateinamen benutzt, um damit eine Grafik/ein Bild in einer festgelegten URL+dateinamen in der Seite anzeigt.

Es könnte sein dass dieser Thread https://forum.selfhtml.org/self/2018/apr/30/frage-zum-wiki-artikel-suchformulare/1721201#m1721201 eine Lösung deines Problems bietet.

[Rolf B]

Hallo Seifried,

das change Event mag eine Lösung sein, es wird gefeuert wenn das Feld verlassen wird.

Das submit Event auf dem Form hast Du in Betracht gezogen? Das fliegt, wenn der Submit-Button ausgelöst wird (durch Klick, Touch oder Enter-Taste).

Letztlich ist's egal, du kannst in beiden Fällen den Inhalt des Eingabefeldes mit JavaScript auslesen, zu einer URL umbauen und dann als src-Attribut eines img Elementes eintragen. Aber JavaScript brauchst Du dann schon. Ist das ok?

Ich hab mal ein bisschen gespielt - mit select statt input weil meine URLs etwas komplizierter sind (Bilder meiner Heimatgegend, aus Wikimedia). Hier: https://jsfiddle.net/s9yw2csf/. Vielleicht kannst Du ja was damit anfangen.

Rolf

[Seifried]

Grüß Dich Rolf - lieben Dank! Das ist schon fast das, was ich suche. Wenn das jetzt ohne Dropdown ein Textfeld wär, wo ich den Dateinamen eingeben könnte, wärs der Treffer. Pfad und Dateiendung wär fest und müsste zum Dateinamen "dazugebaut" werden.

[Rolf B]

Hallo Seifried,

Ich habe ein Beispiel gemacht. Die Wikimedia URLs waren zum Eintippen unpraktisch.

Mit einem Textfeld ist es aber nicht viel anders. Ersetze das select Element mit seinen options durch eins für Texteingabe und passe den Ausdruck im Script an, der die URL baut.

Da du schon so viel recherchiert hast, schaffst du den letzten Schritt sicher selbst.

Es sei denn, du hast bisher GAR keine Erfahrungen mit Webseiten und suchst nur eine Quelle zum Abschreiben unverstandener Brocken. Dann wäre dir eine Lektüre der diversen Tutorials in unserem Wiki zu empfehlen, um dieses Stadium zu überwinden.

Rolf

[Henry]

Hallo Rolf,

Es sei denn, du hast bisher GAR keine Erfahrungen mit Webseiten und suchst nur eine Quelle zum Abschreiben unverstandener Brocken. Dann wäre dir eine Lektüre der diversen Tutorials in unserem Wiki zu empfehlen, um dieses Stadium zu überwinden.

na ja, noch ein wenig mehr Starthilfe kann ja nicht schaden. Zumal ich selber eine Frage dazu habe 😉

<input oninput="document.getElementById('showpic').src = this.value;">
<img id="showpic" style="max-width:100%;" src="">

@Seifried

Daraus kannst du dir die Funktionsweise ableiten. Du musst allerdings den kompletten Namen inkl. Pfad(wenn vorhanden)und Dateiendung eingeben. Bsp: bilder/gestern/meinbild.jpg

Wenn das einheitlich und bekannt ist, zb, alles im Verzeichnis/Ordner "bilder" und die Endung immer .jpg, dann wäre das so:

<input oninput="document.getElementById('showpic').src = 'bilder/'+this.value+'.jpg';">  

In dem Fall brächtest du jetzt nur noch den Dateinamen ohne Endung eingeben, zb. bild1

So, jetzt zu meiner Frage.

Kurioserweise, zeigen die Browser eine seltsame Fehlertoleranz. Wenn ich die Endung vorgebe, also zb. ".jpg", schreibe ins Input aber dennoch zb. "bild1.jpg" wird daraus natürlich zwar "bild1.jpgjpg". Angezeigt wird's trotzdem.

Beispielbild(vom Rolf):

https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Stadtbild_K%C3%B6ln.jpg/800px-Stadtbild_K%C3%B6ln.jpgjpg

Ist so eine Fehlertoleranz sinnvoll?

Gruss
Henry

[Seifried]

Grüß Dich Henry, ich seh schon, das geht alles eleganter. Muss ich gleich mal durchtesten. Jetzt muss ich noch eine Weiche bauen, weils zwei Pfade je nach Art des Dateinamens gibt. Das hab ich aber im Griff denk ich! Liebe Dank und schönes Wochenende, Seifried

[Rolf B]

Hallo Seifried,

Wenn du mit „eleganter“ meinst, JavaScript (nicht Java!) Eventhandler per onxxxxx Attribut zuzuordnen, dann: Nein. Das ist Zeugs aus der Mottenkiste der Webentwicklung. HTML, CSS und Script gehören sauber getrennt.

Es sieht bei Henry zwar schön kompakt aus, führt aber schnell ins Chaos. Besser gar nicht erst angewöhnen.

Ich habe mein Fiddle extra so aufgebaut, dass du siehst, wie man einen Ready−Handler registriert und darin Events anbindet, ohne den globalen Namespace zu „beschmutzen“. Die Init-Funktion ist noch global, das hätte man vermeiden können, aber dann wäre es schwerer lesbar geworden; das wollte ich dir nicht antun 😉. Für eine Miniseite klingt das übertrieben, aber als Prinzip sollte man das kennen lernen.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Das ist Zeugs aus der Mottenkiste der Webentwicklung. HTML, CSS und Script gehören sauber getrennt.

Wobei für manche ebendieses aus der Mottenkiste der Webentwicklung ist. Komponenten gehören sauber getrennt; HTML, CSS und JavaScript für eine Komponente gehören zusammen.

LLAP 🖖

[beatovich]

hallo

Wobei für manche ebendieses aus der Mottenkiste der Webentwicklung ist. Komponenten gehören sauber getrennt; HTML, CSS und JavaScript für eine Komponente gehören zusammen.

Man kann beides repektieren.

Dann wirds:

<input data-addhandler="myhandlerfunc">

Damit ist das input unabhängig von der Implementation geworden.

[Rolf B]

Hallo beatovich,

nein. Das würde ich nicht für korrekt halten. Durch die Nennung eines JS-Funktionsnamens erzeugst Du eine Implementierungs-Abhängigkeit. Wenn dieses Input mit Javascript unterstützt werden muss und die Unterstützung per Attribut zu steuern sein soll, dann hat das Attribut eine fachliche Aussage zu machen. Meinetwegen mit data-xxx, ich würde hier aber eher Klassen einsetzen wollen, weil zum Verhalten meistens auch ein visuelles Design gehört. Das JavaScript kann dann das für die jeweilige fachliche Aussage relevante Verhalten hinzufügen.

Rolf

[beatovich]

hallo

nein. Das würde ich nicht für korrekt halten. Durch die Nennung eines JS-Funktionsnamens erzeugst Du eine Implementierungs-Abhängigkeit.

Nein. Hier wird eine API benutzt. Es muss gar kein entsprechender JS-Funktionsname bestehen.

Wenn dieses Input mit Javascript unterstützt werden muss und die Unterstützung per Attribut zu steuern sein soll, dann hat das Attribut eine fachliche Aussage zu machen.

steht doch da. Die fachliche Aussage ist ein API-Begriff.

Meinetwegen mit data-xxx, ich würde hier aber eher Klassen einsetzen wollen, weil zum Verhalten meistens auch ein visuelles Design gehört.

Ach, siehst du, da beginnst du schon wieder alles durcheinander zu würfeln.

Das JavaScript kann dann das für die jeweilige fachliche Aussage relevante Verhalten hinzufügen.

Diese Möglichkeit ist doch hier gegeben.

[Rolf B]

Hallo beatovich,

Hier wird eine API benutzt. Es muss gar kein entsprechender JS-Funktionsname bestehen. (...) Die fachliche Aussage ist ein API-Begriff.

Ist das dein Ernst? Wenn Du ohne weitere Angaben notierst: data-addhandler="myhandlerfunc", dann schreit das doch „Ich bin ein Funktionsname“. Die Angabe addhandler ist ebenfalls technisch, und nicht fachlich. Ob hier ein Handler gebraucht wird oder nicht, dass sollte im Markup irrelevant sein. Markup sagt „was“, nicht „wie“.

Meinetwegen mit data-xxx, ich würde hier aber eher Klassen einsetzen wollen, weil zum Verhalten meistens auch ein visuelles Design gehört.

Ach, siehst du, da beginnst du schon wieder alles durcheinander zu würfeln.

Nö, und diese Herablassung war jetzt nicht nötig. Ich wollte deinen Ansatz mit data- nicht grundsätzlich ablehnen, aber einwenden, dass ich das nicht so machen würde. Zum einen dürften Browser auf class-Selektionen besser optimiert sein als auf das Filtern beliebiger Attribute, und zum anderen sagt die Spec zum class Attribut

authors are encouraged to use values that describe the nature of the content

Und dann bin ich nicht daneben, wenn ich Klassen nutze um fachliche Eigenschaften eines Elements zu beschreiben. Ich attributiere doch nicht getrennt für Layout und Verhalten. Ich attributiere einmal, neutral, und interpretiere das in CSS-Regeln und JavaScript-Registrierungen.

Das JavaScript kann dann das für die jeweilige fachliche Aussage relevante Verhalten hinzufügen. Diese Möglichkeit ist doch hier gegeben.

Wenn du technisch aussehende Attribute fachlich deutest, dann ja. Es hilft anderen aber beim Verständnis, wenn Fachlichkeit auch fachlich aussieht.

Nur interessehalber: Bei mir klingelt kein Wiedererkennen, und Onkel Bing Googlesby kratzt sich auch nur am Kopf, wenn ich dein data-addhandler sehe. Ist das die Notation eines (nur mir nicht) bekannten Frameworks?

Rolf

[beatovich]

hallo

Hallo beatovich,

Hier wird eine API benutzt. Es muss gar kein entsprechender JS-Funktionsname bestehen. (...) Die fachliche Aussage ist ein API-Begriff.

Ist das dein Ernst? Wenn Du ohne weitere Angaben notierst: data-addhandler="myhandlerfunc", dann schreit das doch „Ich bin ein Funktionsname“. Die Angabe addhandler ist ebenfalls technisch, und nicht fachlich. Ob hier ein Handler gebraucht wird oder nicht, dass sollte im Markup irrelevant sein. Markup sagt „was“, nicht „wie“.

Und denoch, die Implementation ist zu 100% unabhängig davon. Auch wenn deine Implementation Eventdelegation implementiert, musst du das html nicht anfassen.

Gründe gegen Klassen:

• Trennung von CSS, JSS und html
• el.class statt el.classList Manipulationen
• class Syntax-Regeln
• data-Attribute haben zwei Merkmals-Komponenten: den namen UND den wert.

Nur interessehalber: Bei mir klingelt kein Wiedererkennen, und Onkel Bing Googlesby kratzt sich auch nur am Kopf, wenn ich dein data-addhandler sehe. Ist das die Notation eines (nur mir nicht) bekannten Frameworks?

Du kannst dir natürlich eine Systematik für deine JS-APIs ausdenken. Wie zum Beispiel das betreffende Framework im attributname als Kürzel einzubinden.

[Rolf B]

Hallo Gunnar,

aber innerhalb der Komponente trennst Du wieder sauber. Oder baust Du in deine Komponenten style- und onxxx Attribute ein?

Rolf

[Robert B.]

Hallo @Henry,

Kurioserweise, zeigen die Browser eine seltsame Fehlertoleranz. Wenn ich die Endung vorgebe, also zb. ".jpg", schreibe ins Input aber dennoch zb. "bild1.jpg" wird daraus natürlich zwar "bild1.jpgjpg". Angezeigt wird's trotzdem.

Das hängt vom Webserver ab, nicht vom Browser. Woher sollte ein Browser wissen, dass er bild1.jpg anfragen soll und kann, wenn man ihn nach bild1.jpgjpg fragt? „Dateiendungen“ spielen im HTTP-Kontext keine Rolle.

Beispielbild(vom Rolf):

https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Stadtbild_K%C3%B6ln.jpg/800px-Stadtbild_K%C3%B6ln.jpgjpg

Ist so eine Fehlertoleranz sinnvoll?

Da wird vermutlich eine URL umgeschrieben oder es gibt mehrere Sichten …

Viele Grüße
Robert

[Henry]

Hallo Robert,

Da wird vermutlich eine URL umgeschrieben oder es gibt mehrere Sichten …

Ja hast du recht (warum bin ich da nicht selbst drauf gekommen, werde wohl alt 😉 ). Danke.

Gruss
Henry

[Seifried]

Grüß Dich Rolf!

Erwischt :D - Mein Wissen über java, html und php ist rudimentär und ist oft nur Inselwissen. Die Zusammenhänge und die Grundstrukturen hab ich oft nicht aufm Schirm. Ich bin entlarvt. Normalerweise recherchier ich solang bis ich den Ansatz finde, den ich kapier und der mein Problem lösen könnte. Ich glaub, ich hab noch nie in ein Forum geschrieben, weil eh alle Probleme schon mal da waren und man sie finden kann. Aber diesmal war ich verzweifelt. Ich programmier die Dinger auch immer für die Eigennutzung.

So - Hausaufgabe gemacht: ersetze

<select id="bildWahl">
<option value=""></option>
<option value="a/a6/xxx.jpg">Stadtbild Köln</option>
<option value="e/e2/yyy.jpg">Mediapark</option>
<option value="a/a6/zzz.jpeg">Die Bastei</option>
</select>

durch

<input id="bildWahl">	

im java noch die .jpg anghängen:

   let baseUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/";
   let extension = ".jpg";

   wähler.addEventListener("change", function() {
      let auswahl = wähler.value;
      if (auswahl == "") {
         bild.src="";
         untertitel.textContent = "";
      }  else {
         bild.src = baseUrl + auswahl + extension;
         untertitel.textContent = bild.src;
      }

Die gesuchte Funktion ist da!!! JIIIIIIPPIIIEEE!!!! FREUDE! Von da aus kann ich weitermachen! YEAHHH!

Ich dank Dir und ich dank gleichzeitig allen aktiven Forenbeantwortern, die einfach helfen - ohne Gegenleistung! Herzlichen Dank, liebe Grüße und alles Gute!

Seifried