If you want to change the text of a TextArea via Button, SelectBox, Checkbox, … without having to use PHP, or you want to change this text for user interaction without having to send a request to the server, you have to use JavaScript. This code runs on the client side, ie directly in the browser and not on the server.
Thanks to this scripting language, we have the possibility to dynamically change values of different controls for user actions Just-In-Time.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <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> |
First we create a JavaScript function in the <head> area. This has the simple task of overwriting the current value value of a TextArea with the currently selected value of a Select box. For this we use the document.getElementById function. This returns us the element with the parameter passed string whose value we can now access.
In the <body> part of the page, we now insert the Select box and tell it that when a user selects a value in the box, the RefreshValue function should be called. In addition, we give her the ID ‘select’ to be able to address her later via JavaScript. We also add a couple of options that we want to select and later paste into the TextArea.
Finally, only the actual TextArea whose value we want to set via JavaScript comes to an end.
