ID in Iput Value übergeben

[Rolf B]

Hallo matp,

es geht weiter. Was tut man nicht alles für seinen Lieblings-Skiort 😉

Gehörst Du eigentlich zu F&S oder zu ICC?

• Die Eingabe für das QR-Code Feld musst Du mit encodeURIComponent codieren, andernfalls würden URI-Steuerzeichen wie : / ? oder & (es gibt noch mehr) den Aufruf des QR-Code Service kaputtmachen.
• Wenn Du in JavaScript eine URL mit Parametern zusammenbaust, darfst Du das & Zeichen nicht HTML-Codieren. Das ist nur nötig, wenn Du das src für das img Element im HTML notierst. Durch dein & wird die Größenangaben mit in den QR-Code hineincodiert.
• Du solltest Dich mit Dir selbst auf eine QR Größe einigen. Im <img> Element steht 100x100, das Element stylest Du auf 200x200, und im JavaScript setzt Du 50x50. Hm, was denn nun? Die Defaultgröße von qrserver ist 250x250, nimm das doch einfach so wie es ist. Wenn Dir das zu groß ist, dann setze size=200x200 als Parameter für den Service-Aufruf, und lass das <img> in seiner natürlichen Größe (ohne width/height) anzeigen.
• Wenn Du schon jQuery verwendest, dann auch konsequent. Man kann mit jQuery change- oder blur-Handler für Input-Elemente definieren.

Ich habe mal in jsFiddle etwas herumgespielt:

https://jsfiddle.net/Rolf_b/146to78m/

Deine decodeBase64Url Funktion habe ich runderneuert. Das war zu umständlich.

Das erwähnte Problem mit &amp in JavaScript ist behoben.

Den javaScript-Teil kannst Du so, wie er ist, in <script>-Elemente einrahmen. jQuery musst Du vorher, und zwar nur EINMAL, einbinden. Ob die 1.9.1 oder die ohne Version (das ist die 1.11) ist egal.

<script src="jquery.min.js"></script>
<script type="text/javascript">>
...script aus fiddle hier...
</script>

Dein HTML und CSS habe ich etwas modernisiert. Input-Elemente brauchen Labels. Ein Text innerhalb eines input ist keine gültige Beschriftung. Statt mit <br/> erzeugt man Abstände besser mit margin oder padding. Einen Header nennt man auch so, dafür gibt es das <header> Element. Meinen <footer> kannst Du weglassen 😀

Wenn Du kompatibel zu älteren Internet Explorern sein willst, musst Du im CSS noch

header, footer, main, section {
   display:block;
}

notieren.

Rolf