Wert aus Datalist in Textarea übertragen

[Mark15]

Hallo,
ich hätte eine Frage.
Ist es möglich aus einer Datalist den Wert in eine Textera zu übertragen?

Grüße Markus

 

[Sempervivum]

Sicherlich ist das möglich. Eine Textarea ist ja primär für die Eingabe von längeren Texten vorgesehen. Was hast Du denn genau vor? Einen längeren Text aus der Datalist in die Textarea übertragen? Oder soll normal Text in die Textarea eingegeben werden und dann bei Bedarf an der Cursorposition der Wert aus der Datalist eingefügt werden? Beschreibe genauer.

 

[Mark15]

Ich habe eine Datalist mit vordefinierten Texten.
diese sollen zur besseren Lesbarkeit können uach länger mit Zeilenumbruch sein in die Texterea übertragen werden um diese zb von da aus zu lesen

 

[Sempervivum]

OK, wenn es nur um die Lesbarkeit geht: Muss es dann unbedingt eine Textarea sein? Du könntest den Text auch in ein beliebiges Containerelement wie div eintragen, dann hättest Du das volle Programm von HTML und CSS für die Gestaltung.

 

[Mark15]

Wäre nicht schlecht wenn es in der Textarea wäre vielleicht muss man auch noch etwas hinzufügen

 

[Sempervivum]

Verstehe. Hast Du ein wenig Kenntnisse in Javascript?

 

[Mark15]

bin gerade am lernen
Also noch am Anfang...

 

[Sempervivum]

OK, ich bereite da mal etwas vor ...

 

[Mark15]

Wow das wäre ja echt Cool.Danke!!!!

 

[Sempervivum]

Und damit wir nicht aneinander vorbei reden: Mit Datalist meinst Du so etwas, nicht wahr:
https://developer.mozilla.org/de/docs/Web/HTML/Element/datalist
Der Text, den man eingibt, wird in den Optionen der Datalist gesucht und der/die Treffer darunter angezeigt. Wie soll das bei längeren Texten mit Zeilenumbrüchen darin funktionieren? Die Liste, die darunter aufpoppt, wird dann ja u. U. ziemlich groß?

 

[Mark15]

Ja genau das ist es.
Es soll in der Datalist vorgewählt werden in die textarea übertragen werden und bei bedarf noch was dazu geschrieben werden.
Kann muss aber nicht.
So sieht es zb aus

<div class="col-6">
            <label for="sachverhalt" class="form-label">Lagemeldung</label>
            <input class="form-control" list="sachlist" id="sachverhalt" style="font-weight: bold;" placeholder="Vorschläge Lagemeldung...">
            <datalist id="sachlist">
              <option value="1 Trupp unter PA mit 1 C-Rohr auf Erkundung">
              <option value="1 Trupp unter PA mit Kleinlöschgerät im Gebäude">
              <option value="1 Trupp unter PA mit Kleinlöschgerät auf Erkundung">
              <option value="1 Trupp unter PA mit 1 C-Rohr im Gebäude">
              <option value="2 Trupps unter PA mit 2 C-Rohren im Gebäude">
              <option value="2 Trupps unter PA mit 2 C-Rohren im Gebäude">
              <option value="2 Trupps unter PA mit 2 C-Rohren im Gebäude">

 

[Sempervivum]

Ganz einfache Lösung:

    <textarea id="textarea-sachverhalt"></textarea>
    <label for="sachverhalt" class="form-label">Lagemeldung</label>
    <input class="form-control" list="sachlist" id="sachverhalt" style="font-weight: bold;"
        placeholder="Vorschläge Lagemeldung...">
    <datalist id="sachlist">
        <option value="1 Trupp unter PA mit 1 C-Rohr auf Erkundung">
        <option value="1 Trupp unter PA mit Kleinlöschgerät im Gebäude">
        <option value="1 Trupp unter PA mit Kleinlöschgerät auf Erkundung">
        <option value="1 Trupp unter PA mit 1 C-Rohr im Gebäude">
        <option value="2 Trupps unter PA mit 2 C-Rohren im Gebäude">
        <option value="2 Trupps unter PA mit 2 C-Rohren im Gebäude">
        <option value="2 Trupps unter PA mit 2 C-Rohren im Gebäude">
    </datalist>
    <script>
        document.getElementById('sachverhalt').addEventListener('change', event => {
            document.getElementById('textarea-sachverhalt').innerHTML = event.target.value;
        });
    </script>

Da bleiben wahrscheinlich noch Fragen offen aber probiere es so weit erst Mal aus.

 

[Mark15]

Perfekt klappt wie ne eins!!!
Vielen Dank

 

[Sempervivum]

Gern geschehen, freut mich zu lesen.

 

[Mark15]

Bin mal gespannt wie es dann geht wenn ich die Daten in die Datenbank bringe
Das geht ja dann auch mit Radio buttons usw oder?

 

[Sempervivum]

Hm, ich sehe nicht, wozu man dabei Radiobuttons brauchen würde. Radiob. werden benutzt, wenn man genau eine Option aus mehreren auswählen möchte.

 

[Sempervivum]

Oder meinst Du, wie das Eintragen in die Datenbank angestoßen werden soll? Dafür gibt es zwei Möglichkeiten: Ein Formular abschicken oder die Daten mit Ajax an den Server übertragen.