[JavaScript] Wert einer TextArea ändern

Drucken
( 1 Vote )
Hauptkategorie: Programmieren Kategorie: JavaScript
Erstellt am 16.12.2011 Zuletzt aktualisiert am 09.08.2012 Geschrieben von Jonny132
Will man den Text einer TextArea per Button, SelectBox, Checkbox,... ändern ohne dafür PHP verwenden zu müssen, bzw man diesen Text bei Benutzerinteraktonen ändern will ohne dabei einen Request an den Server schicken zu lassen, muss man JavaScript verwenden. Dieser Code läuft auf der Client Seite, das heisst direkt im Browser und nicht am Server.
Dank dieser Scriptsprache haben wir die möglichkeit Werte von verschiedenen Controls dynamisch bei Benutzeraktionen Just-In-Time zu ändern.

Hier vorab das Produktivbeispiel

Dieser Code soll dies veranschaulichen
Per Select - Box Wert einer TextArea setzen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
   <head>
   <script type="text/javascript">
     function RefreshValue()
     {
        document.getElementById("textarea").value = 
          document.getElementById("select").value;
    }     </script>   </head>   <body>     <select onchange="RefreshValue()" id="select">       <option value="100">100</option>       <option value="150">150</option>       <option selected value="200">200</option>     </select>     <br />     <textarea id="textarea" rows="1" cols="5">200</textarea>   </body> </html>

 

Zuerst erstellen wir im <head> - Bereich eine JavaScript - Funktion. Diese hat die einfache Aufgabe den aktuellen Value - Wert einer TextArea mit dem aktuell Selectierten Wert einer Select - Box zu überschreiben. Dazu nutzen wir die document.getElementById - Funktion. Diese gibt uns das Element mit der per Parameter übergeben String zurück auf dessen Value wir nun zugreiffen können.

Im <body> - Part der Seite fügen wir nun die Select - Box ein und sagen ihr, dass wenn ein User einen Wert in der Box auswählt die Funktion RefreshValue aufgerufen werden soll. Zudem geben wir ihr die ID 'select' um sie später per JavaScript ansprechen zu können. Ausserdem fügen wir ihr ein Paar Optionen hinzu, die wir auswählen und später in die TextArea einfügen wollen hinzu.

Zu Schluss kommt nur noch die eigentliche TextArea dessen Wert wir per JavaScript setzen wollen.

Produktivbeispiel

Wert per JavaScript ändern

    Veröffentlichen Sie ihre Kommentare ...