Formularfelder in textarea zusammenfassen

[Sempervivum]

Dies:

    <!-- Diese Hilfs-Textarea legen wir außerhalb des Formulars
        weil sie in die Zusammenfassung nicht einbezogen werden soll:
        -->

war gut gemeint, aber es wirkt nur, wenn man auch nur die Elemente innerhalb des Formular berücksichtigt. So sollte es besser gehen:

    <script>
        function copyFormData() {
            // Formularelemente Textinputs, Textareas und Selects bereit stellen:
            const
                form = document.querySelector('form'),
                formElems = form.querySelectorAll('input[type="text"], textarea, select'),
                txtCont = document.getElementById('zusammenfassung');
            let txt = '';
            // Schleife über die Elemente:
            formElems.forEach(item => {
                // In item steht jetzt das aktuelle Formularelement.
                const
                    // Das Label, das dazu gehört, ermitteln:
                    lbl = document.querySelector('label[for="' + item.id + '"]'),
                    // Und den Wert:
                    val = item.value,
                    // Jetzt können wir die Zeile für die Textarea
                    // zusammen bauen:
                    line = lbl.textContent + ': ' + val + ';';
                // und zum Text für die Textarea hinzu fügen:
                txt += line;
                console.log(txt);
            });
            txtCont.textContent = txt;
            // Jetzt können wir den Text in die Zwischenablage
            // kopieren.
            navigator.clipboard.writeText(txt);
        }
    </script>

Wenn es dann immer noch nicht geht: Was für ein HTML verwendest Du? Ich habe es mit dem aus Posting #2 getestet und da sind keine Textareas und keine Selects drin.

 

[Waico]

Dies:

    <!-- Diese Hilfs-Textarea legen wir außerhalb des Formulars
        weil sie in die Zusammenfassung nicht einbezogen werden soll:
        -->

war gut gemeint, aber es wirkt nur, wenn man auch nur die Elemente innerhalb des Formular berücksichtigt. So sollte es besser gehen:

    <script>
        function copyFormData() {
            // Formularelemente Textinputs, Textareas und Selects bereit stellen:
            const
                form = document.querySelector('form'),
                formElems = form.querySelectorAll('input[type="text"], textarea, select'),
                txtCont = document.getElementById('zusammenfassung');
            let txt = '';
            // Schleife über die Elemente:
            formElems.forEach(item => {
                // In item steht jetzt das aktuelle Formularelement.
                const
                    // Das Label, das dazu gehört, ermitteln:
                    lbl = document.querySelector('label[for="' + item.id + '"]'),
                    // Und den Wert:
                    val = item.value,
                    // Jetzt können wir die Zeile für die Textarea
                    // zusammen bauen:
                    line = lbl.textContent + ': ' + val + ';';
                // und zum Text für die Textarea hinzu fügen:
                txt += line;
                console.log(txt);
            });
            txtCont.textContent = txt;
            // Jetzt können wir den Text in die Zwischenablage
            // kopieren.
            navigator.clipboard.writeText(txt);
        }
    </script>

Wenn es dann immer noch nicht geht: Was für ein HTML verwendest Du? Ich habe es mit dem aus Posting #2 getestet und da sind keine Textareas und keine Selects drin.

gute Frage, du lachst bestimmt gleich Ich verwende den Editor Notepad++v8.1.4 dann haue ich den Quellcode darein, speichere den ab und schaue mir das im Chrom an

 

[Jan-Frederik Stieler]

Nein er meint schon wirklich welches Html du hast nicht welchen Editor Du verwendest, das ist im Grunde egal.
Den das JS funktioniert nur wenn es sich auch auf die entsprechenden HTML-Elemente beziehen kann die im JS referenziert sind.
Also poste doch mal Deinen kompletten Code de nDu in Deinem Notepad stehen hast.

Grüße

 

[Sempervivum]

BTW: Jetzt auch mit Texteara und Select getestet.

 

[Waico]

Nein er meint schon wirklich welches Html du hast nicht welchen Editor Du verwendest, das ist im Grunde egal.
Den das JS funktioniert nur wenn es sich auch auf die entsprechenden HTML-Elemente beziehen kann die im JS referenziert sind.
Also poste doch mal Deinen kompletten Code de nDu in Deinem Notepad stehen hast.

Grüße

Im ersten Beitrag von mir, habe ich dieses bereits hoch geladen. Ansicht habe ich dieses so als gut befunden und für meine zwecke ausreichend.

Habe das Im Editor einmal so zusammen gefasst und getestet. Ich werde durch euch bestimmt noch ein Super Spezialist hi nun hat er es übernommen. hi vielleicht komme ich nun doch weiter.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

            "http://www.w3.org/TR/html4/loose.dtd">



 <h1 class="Stil2">Meldung</h1>

    <form action="" method="get">



        <label for="1" class="Stil12">Kundennummer*</label>

        <input name="1" type="text" id="1" required />



        <label for="2" class="Stil12">Vorgang*</label>

        <input name="2" type="text" id="2" required />



        <label for="3" class="Stil12">Vor- und Nachname*</label>

        <input name="2" type="text" id="3" required />



        <!-- usw. mit den restlichen Formularelementen -->





        <input type=button onclick="copyFormData();" value="Zwischenspeicher">

        <input type=reset onclick=clearform() value="Eingabe reseten">

    </form>

    <!-- Diese Hilfs-Textarea legen wir außerhalb des Formulars

    weil sie in die Zusammenfassung nicht einbezogen werden soll:

    -->

    <textarea id="zusammenfassung"> Zusammenfassung </textarea>

 <script>

        function copyFormData() {

            // Formularelemente Textinputs, Textareas und Selects bereit stellen:

            const

                form = document.querySelector('form'),

                formElems = form.querySelectorAll('input[type="text"], textarea, select'),

                txtCont = document.getElementById('zusammenfassung');

            let txt = '';

            // Schleife über die Elemente:

            formElems.forEach(item => {

                // In item steht jetzt das aktuelle Formularelement.

                const

                    // Das Label, das dazu gehört, ermitteln:

                    lbl = document.querySelector('label[for="' + item.id + '"]'),

                    // Und den Wert:

                    val = item.value,

                    // Jetzt können wir die Zeile für die Textarea

                    // zusammen bauen:

                    line = lbl.textContent + ': ' + val + ';';

                // und zum Text für die Textarea hinzu fügen:

                txt += line;

                console.log(txt);

            });

            txtCont.textContent = txt;

            // Jetzt können wir den Text in die Zwischenablage

            // kopieren.

            navigator.clipboard.writeText(txt);

        }

    </script>

 

[Jan-Frederik Stieler]

Hi,
ich weiß jetzt nicht ob Du dir das nur hier jetzt gespart hast, aber bei einem HTML-Dokument sind <html> <head><body> zwingend. Also falls die Grundstruktur bei Dir fehlt dann füge diese noch hinzu.

Gruß

PS: Wenn Du größere mengen Code postest nutze bitte die Codeblocks.

 

[Waico]

Hi,
ich weiß jetzt nicht ob Du dir das nur hier jetzt gespart hast, aber bei einem HTML-Dokument sind <html> <head><body> zwingend. Also falls die Grundstruktur bei Dir fehlt dann füge diese noch hinzu.

Gruß

PS: Wenn Du größere mengen Code postest nutze bitte die Codeblocks.

Ja du hast Recht. Ich dussel. Irgendwann sieht man den Wald voller Bäume nicht mehr. Danke