Mehrere <textarea> (ID's) zu einer zusammenführen

[El Cheffe]

Hallo zusammen, ich habe mir ein Formular gestrickt, wo mehrere textarea's mit id existieren, um diese auszudrucken möchte ich diese gerne zu einer zusammenführen. Stelle mir das so vor <textarea id="box1"> <textarea id="box2"> usw. zusammenführen zu <textarea id="alleboxen"> Mein Formular sieht in etwa so aus:

<fieldset>
<legend>BOX1</legend>
<form name="box1">
<input type=checkbox name="punkte" value="Artikel1" onClick="auswahl1()">
Artikel1<br>
<input type=checkbox name="punkte" value="Artikel2" onClick="auswahl1()">
Artikel2<br>
<textarea id="box1" cols="20" rows="5" type=text name="anzeige1" readonly></textarea>
</form>
</fieldset>
<br>
<fieldset>
<legend>BOX2</legend>
<form name="box2">
<input type=checkbox name="punkte" value="Wert1" onClick="auswahl2()">
Wert1<br>
<input type=checkbox name="punkte" value="Wert2" onClick="auswahl2()">
Wert2<br>
</fieldset>
<textarea id="box1" cols="20" rows="5" type=text name="anzeige1" readonly></textarea>
</form>
</fieldset>

Der Ausruck wäre dann soetwas:

<a href="javascript:PrintTextareaContent('box','printing_div_id')">
<p class="button">Drucken</p>
<div id="printing_div_id" class="forprinting" style="white-space:pre-line;"></div>
<script type="text/javascript">
function PrintTextareaContent(textarea_field,printing_div) {
document.getElementById(printing_div).innerHTML = document.getElementById(textarea_field).value;
print();
}
</script>

Also die Ausgabe zum Druck funktioniert soweit, der einzige Haken ist, das ich nur eine Textarea drucken kann, deshalb möchte ich alle zusammenführen. Ich hatte da was im Netz gefunden, aber es will nicht, irgendwo ist ein Hick... Hier das umgestrickte aus dem Netz:

<!-- Textareas zusammenfassen -->       
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
    var box1 = document.getElementById("box1"),
        box2 = document.getElementById("box2"),
        alleboxen = document.getElementById("box");

    function kombiniere () {
        // box1, box2, box3 und ergibt sind als Variablen hier bekannt (Closure)
        alleboxen.value = box1.value + " " + box2.value;
    }

    if (box1 && box2 && box) {
        box1.addEventListener("change", kombiniere);
        box2.addEventListener("change", kombiniere);
    }
});
</script>

Vielleicht hat ja wer eine Idee, wie ich das umsetzen kann...

Wäre cool!!!

Gruß aus Frankreich, El Cheffe

[JürgenB]

Hallo,

… aber es will nicht, irgendwo ist ein Hick...

geht das etwas präziser? Wie äußert sich „aber es will nicht“? Gibt es da in der Javascriptkonsole eine Meldung? Und was ist ein „ Hick“?

Gruß
Jürgen

[El Cheffe]

Hallo Jürgen, habe es schon durch Martins Tipps hinbekommen, übrigens ein Hick ist ein anderer Ausdruck für das es hakt. Gruß, Holger (El Cheffe)

[Der Martin]

Hallo,

eins vorweg: Ich habe mir mal erlaubt, die Formatierung der Code-Blöcke zu reparieren.

ich habe mir ein Formular gestrickt, wo mehrere textarea's mit id existieren, um diese auszudrucken möchte ich diese gerne zu einer zusammenführen.

Ich kann mir im Moment noch keine sinnvolle Anwendung vorstellen.

<fieldset>
<legend>BOX1</legend>
<form name="box1">
<input type=checkbox name="punkte" value="Artikel1" onClick="auswahl1()">
Artikel1<br>
<input type=checkbox name="punkte" value="Artikel2" onClick="auswahl1()">
Artikel2<br>
<textarea id="box1" cols="20" rows="5" type=text name="anzeige1" readonly></textarea>
</form>
</fieldset>
<br>
<fieldset>
<legend>BOX2</legend>
<form name="box2">
<input type=checkbox name="punkte" value="Wert1" onClick="auswahl2()">
Wert1<br>
<input type=checkbox name="punkte" value="Wert2" onClick="auswahl2()">
Wert2<br>
</fieldset>
<textarea id="box1" cols="20" rows="5" type=text name="anzeige1" readonly></textarea>
</form>
</fieldset>

Dein HTML ist grob fehlerhaft. Zunächst mal hast du nicht ein Formular, sondern zwei. Warum? Sollte es nicht eins sein? Dann die Verschachtelung: Du hast da zwei fieldsets, die je ein form enthalten. Das ist so falsch; fieldset muss ins Formular hinein, so dass deine Grundstruktur eher so aussieht:

<form>
 <fieldset>
  <textarea></textarea>
 </fieldset>
 <fieldset>
  <textarea></textarea>
 </fieldset>
</form>

Außerdem haben deine textareas beide dieselbe ID "box1", das darf nicht sein. Das ist vermutlich nur ein C&P-Fehler, sie haben nämlich auch dasselbe name-Attribut (führt aber trotzdem dazu, dass z.B. getElementById("box2") ins Leere läuft).

<a href="javascript:PrintTextareaContent('box','printing_div_id')">
<p class="button">Drucken</p>
<div id="printing_div_id" class="forprinting" style="white-space:pre-line;"></div>

So nicht! Ein Link ist dazu da, eine neue Ressource/ein neues Dokument aufzurufen. Für Benutzer-Interaktionen innerhalb der Seite ist das button-Element vorgesehen. Außerdem fehlt deinem Link das schließende Tag.
Das div-Element soll dann wohl die kombinierten Inhalte der textarea-Elemente aufnehmen?

Bedenke aber, dass du mit Javascript nicht gezielt nur bestimmte Elemente ausdrucken kannst. Eventuell kannst du das aber mit einem Print-Stylesheet erreichen, mit dem du alle restlichen Elemente außer dem gewünschten ausblendest.

<script type="text/javascript">
function PrintTextareaContent(textarea_field,printing_div) {
document.getElementById(printing_div).innerHTML = document.getElementById(textarea_field).value;
print();
}
</script>

Also die Ausgabe zum Druck funktioniert soweit, der einzige Haken ist, das ich nur eine Textarea drucken kann, deshalb möchte ich alle zusammenführen.

Und woran genau scheiterst du? Der Ansatz ist doch schon da. Jetzt musst du nur noch den Inhalt des zweiten (evtl. dritten) textarea-Elements auf dieselbe Weise auslesen und die miteinander verbinden. Zur Stringverkettung dient in Javascript das Pluszeichen.

<!-- Textareas zusammenfassen -->       
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
    var box1 = document.getElementById("box1"),
        box2 = document.getElementById("box2"),
        alleboxen = document.getElementById("box");

    function kombiniere () {
        // box1, box2, box3 und ergibt sind als Variablen hier bekannt (Closure)
        alleboxen.value = box1.value + " " + box2.value;
    }

    if (box1 && box2 && box) {
        box1.addEventListener("change", kombiniere);
        box2.addEventListener("change", kombiniere);
    }
});
</script>

Das ist von hinten durch die Brust ins Knie, und außerdem hast du dich da zwei- oder dreimal mit den Bezeichnern verzettelt. Vergiss diesen Fitzel am besten wieder und mach einen Abschnitt weiter oben weiter. Da warst du ja schon fast am Ziel.

Immer eine Handbreit Wasser unterm Kiel
 Martin

[El Cheffe]

Hallo Der Martin, vielen Dank vorab für die schnelle Antwort und für die Formatierung des Quelltext! Ich korrigiere jetzt erst einmal meine Fehler, werde mich dann später nochmal melden! Keine Ahnung, was mich da geritten hat, das <form>Tag mehrmals zu setzen... Also ich arbeite das ganze nochmal ab... Bis später...

[Raketenwilli]

Vorab: Was ich Dir hier erkläre habe ich selbst auch oft und lange falsch gemacht, auch ich habe Zeit und mühe verschwendet und mit dem Programmschreiben begonnen bevor mir klar war, was das Programm (und dann dessen Teile) GENAU tun sollen.

Keine Ahnung, was mich da geritten hat, das <form>Tag mehrmals zu setzen...

Das ist ein Hinweis auf ein grundsätzliches Problem. Du musst Deine Herangehensweise ändern:

Erst einmal brauchst Du nämlich einen Plan den Du dann stufenweise auf die einzelnen Operationen herunterbrichst.

Lese mal unter https://de.khanacademy.org/computing/computer-programming/programming/good-practices/a/planning-a-programming-project ab „3. Welche Funktionen soll es haben?“

Das wäre aber nur für ersten Schritte. Später solltest Du hier lesen: https://de.wikipedia.org/wiki/Vorgehensmodell_zur_Softwareentwicklung

Dein „Keine Ahnung, was mich da geritten hat, das <form>Tag mehrmals zu setzen...“ lässt mich nämlich vermuten, dass Du mit Punkt 3. also der „Implementation“ des „Wasserfallmodells“ begonnen hast, denn sowas macht man nur, wenn man nicht ganz so genau weiß, was das Gesamtwerk leisten soll - was die Folge des Auslassens der ersten beiden Schritte ist.

Und ja. Bei kleinen Sachen kann man die Schritte 1 (Anforderungen) und/oder 2 (Entwurf) durchaus im Kopf erledigen - aber das klappt nur, wenn der nicht gleichzeitig damit befasst ist, die Grundlagen der jeweiligen Programmiersprache (hier Verknüpfung zweier Texte) zusammenzusuchen und womöglich auch den komplexen Zusammenhang von HTML, CSS und JS noch nicht durchschaut hat, denn es ist noch anzumerken, dass neben Javascript im Browser auch das serverseitige PHP für erste Schritte des Programmieren Lernens „nicht wirklich geeignet“ sind. Das komplexes Zusammenspiel von HTML, CSS und ggf. noch dem HTTP[S]-Protokoll ist selbst schon geeignet, Beginner zu verwirren.

Das Du in dieser Phase bist zeigst Du durch die fehlende, respektive nicht gezeigte Kontrolle Deiner Arbeit in den Entwicklertools des Browsers.

[Rolf B]

Hallo El Cheffe,

bitte beschäftigte Dich mit der Notwendigkeit, Eingabeelementen ein label Element zu geben. Einfach Text neben eine Checkbox zu schreiben hilft Menschen weiter, die die Seite mit ihren Augen wahrnehmen. Alle anderen tappen im Dunklen.

<input type="checkbox" name="..." value="..." id="checkbox1">
<label for="checkbox1">Artikel 1</label>

Name und Value sind relevant, wenn Du ein Form an den Server schickst - angehakte Checkboxen werden mit diesem Namen und diesem Wert übermittelt. Die ID ist für die Zuordnung des Labels erforderlich.

Zwei Checkboxen mit gleichem Namen sind serverseitig mit etwas Mühe verarbeitbar - aber sinnvoll ist das nicht. Wenn Du serverseitig mit PHP arbeitest, KANNST Du an den Namen ein [] anhängen, also z.B. name="punkte[]", und findest PHP-seitig dann unter $_POST['punkte'] ein Array mit den values aller gesetzten Checkboxen vor.

Zum Thema Drucken möchte ich Dir Martins Hinweis auf ein Print-Stylesheet weißglühend heiß ans Herz legen. Es sei denn, Du musst UNBEDINGT die beiden Texte aus den Textareas als einen Fließtext ausgeben. Aber mit einem Print-Stylesheet könntest Du erreichen, dass alle Oberflächenelemente außer den beiden textareas auf display:none gesetzt werden, und die beiden textareas mit height:auto untereinander stehen. Und dann musst Du beim Drucken auch nicht aufpassen, dass nur das markierte Element gedruckt wird. Du druckst einfach das Dokument.

Rolf

[Der Martin]

Hallo Rolf,

Zum Thema Drucken möchte ich Dir Martins Hinweis auf ein Print-Stylesheet weißglühend heiß ans Herz legen. Es sei denn, Du musst UNBEDINGT die beiden Texte aus den Textareas als einen Fließtext ausgeben. Aber mit einem Print-Stylesheet könntest Du erreichen, dass alle Oberflächenelemente außer den beiden textareas auf display:none gesetzt werden, und die beiden textareas mit height:auto untereinander stehen. Und dann musst Du beim Drucken auch nicht aufpassen, dass nur das markierte Element gedruckt wird. Du druckst einfach das Dokument.

die Idee ist gut, auf den einfachen Gedanken bin ich tatsächlich nicht gekommen. Und zwar deshalb, weil ich die Aufgabenstellung des OP (zwei oder mehr textarea-Inhalte im Ganzen ausdrucken) nur für einen Teil des Problems halte. Ich vermute tatsächlich, dass auch noch eine weitere Anforderung unsichtbar im Raum steht, bei der er/sie die Texte tatsächlich am Stück braucht.

Trotzdem kann ich noch keinen wirklichen Use Case erkennen und frage daher nochmal genau danach. Nicht weil ich meine, das Problem könnte ich auch mal haben, sondern aus rein akademischem Interesse. Aus demselben Beweggrund, wie ich bei Religionen manchmal nach dem zugrundeliegenden Prinzip oder Dogma frage. Nicht weil ich dazugehören und es für mich verinnerlichen will, sondern nur, um es zu verstehen.

Btw: El Cheffe klingt wegen des Artikels mehr nach Spanien als nach Frankreich. Hmm ... 🤔

Immer eine Handbreit Wasser unterm Kiel
 Martin

[El Cheffe]

Hallo Martin, ich habe es auf einfachster Weise ans laufen bekommen ohne zusammenfügen etc., habe alles überarbeitet und ich bekomme es in einer einzigen Textarea ausdruckt. Werde mich mit dem Drucken (CSS) noch später dann auseinandersetzen! Also nochmals VIELEN DANK Holger alias El Cheffe aus Deutschland in Frankreich lebend.

[El Cheffe]

Hallo Rolf B, werde es so abändern, vielen Dank für die Info, bzw. den Ratschlag! Ich habe es soweit ans laufen bekommen, das mit dem Drrucken werde ich dann auch noch umbauen! Also nochmals VIELEN DANK! Gruß, Holger (El Cheffe)