Formularfelder in textarea zusammenfassen

W

Waico

Grünschnabel
Hallo Forum, Mitglieder,
ich fange mal nicht an, dass ich blutiger Anfänger bin, aber ich bin blutiger Anfänger und trotzdem möchte ich mich versuchen.

Ich habe für mich ein Formular erstellt, um meine Arbeit zu vereinfachen. Mein
Ziel ist:
--------
- den Formularinhalt (Name, Adressdaten ... ) in einer Textarea (anzeigen zu lassen/ oder auch in einer versteckten Textarea) zusammen zufassen und über den Button Zwischenspeicher zu speichern, damit ich den Formularinhalt woanders einfügen kann. (ich möchte das nicht in einer Text Datei ausgegeben bekommen, auch nicht via Email versenden, einfach nur den Formularinhalt in den Zwischenspeicher, damit ich dieses woanders einfügen kann). Ach so, ich habe mal gelesen das Label nicht mehr genutzt werden, aber ich bekomme es einfach nicht anders hin.

Könnte mir da jemand weiterhelfen
 

Anhänge

ich habe mal gelesen das Label nicht mehr genutzt werden, aber ich bekomme es einfach nicht anders hin.
Zum Vergrößern anklicken....
Hier liegt offenbar eine Verwechslung oder ein Schreibfehler vor, denn diese Aussage bezieht sich sehr wahrscheinlich auf Tabellen und auch nur dann, wenn sie für Layout-Zwecke missbraucht werden.

Außerdem ist dein HTML-Grundgerüst veraltet, informiere dich hier über den aktuellen Stand:
HTML/Tutorials/Grundgerüst – SELFHTML-Wiki

Weiter: Um ein Element zu stylen, muss man nicht immer ein span oder div darum herum legen. Im Gegenteil macht das das Styling unübersichtlich weil man immer nachdenken muss, was jetzt vererbt wird und was nicht. D. h. in deinem Fall kann man dieses:
Code: 
            <tr>
                <td><span class="Stil12">
                        <textarea> Zusammenfassung </textarea>
            </tr>
problemlos ersetzen durch dieses:
Code: 
            <tr>
                <td class="Stil12">
                    <textarea> Zusammenfassung </textarea>
                </td>
            </tr>

Dein Layout lässt sich jedoch viel kompakter und einfacher mit Gridlayout umsetzen:
HTML: 
    <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 -->
    </form>
Mit diesem CSS kannst Du die Elemente dann in zwei Spalten anordnen:
Code: 
        form {
            display: inline-grid;
            /* 2 Spalten mit gleicher Breite nebeneinander: */
            grid-template-columns: 1fr 1fr;
        }
Weitere Informationen zum Gridlayout:
A Complete Guide to Grid | CSS-Tricks
 
Zuletzt bearbeitet:
PS: Tut mir Leid, jetzt bin ich ganz von deiner Frage abgekommen. Du möchtest offenbar, dass eine Übersicht der Formulardaten in die Textarea, wo Du jetzt "Zusammenfassung" hinein geschrieben hast, beim Drücken von "Zwischenspeicher" eingetragen wird und in die Zwischenablage kopiert, richtig?
 
ja genau darum geht es mir hauptsächlich. Die Formularfelder entweder in ein sichtbares / oder unsichtbare Textarea (mit einer sauberen Formatierung) zusammen gefasst und dann in den Zwischenspeicher. Ich werde noch irre :)
 
Dann stellt sich die Frage, in welchem Format das in die Zwischenablage gelangen soll:
Ich vermute, ebenso wie im Formular sichtbar, d. h. links die Labels und daneben die Werte?
 
Ich habe das mal so programmiert:
Code: 
    <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
                formElems = document.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 man die Clipboard-API
Unblocking clipboard access
verwendet, braucht man die Textarea gar nicht um den Text in die Zwischenablage zu kopieren.
Die Clipboard-API gibt auch eine Rückmeldung ob das Kopieren erfolgreich war, die könntest Du verwenden, um dem Benutzer eine Rückmeldung zu geben.
 
PS: Jetzt wo ich das soweit fertig habe, fällt mir ein, dass man das viel eleganter mit dem FormData-Objekt hätte machen können. Das ermöglicht es, über die Formularelemente zu iterieren und auf Schlüssel und Wert zuzugreifen. Allerdings wäre der Schlüssel dann wahrscheinlich das name-Attribut was weniger geeignet sein könnte.
 
Sempervivum hat gesagt.:
PS: Jetzt wo ich das soweit fertig habe, fällt mir ein, dass man das viel eleganter mit dem FormData-Objekt hätte machen können. Das ermöglicht es, über die Formularelemente zu iterieren und auf Schlüssel und Wert zuzugreifen. Allerdings wäre der Schlüssel dann wahrscheinlich das name-Attribut was weniger geeignet sein könnte.
Zum Vergrößern anklicken....
Ich bin echt gespannt und schaue mir das später an. Vorab schon Mal vielen Dank
 
Hallo nun bin ich dazu gekommen mir das anzuschauen. Erstmal erneut vielen dank für deine Unterstützung. Finde ich echt Klasse! Ich habe in den Feldern Werte eingetragen und auf den Zwischenspeicher geklickt, aber der ist leer, hmm hmm

Habe ich da einen Fehler gemacht?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück