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

[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