Introduction
In this article I explain how to display data in a "text area" in a PHP application using JavaScript. If we talk about the text area, then we can simply say that a text area in a web page is essentially a multiple text box that permits the user to enter a large amount of data into it. You set the text area's value property to the text you wish to show. The text will contain return characters, and therefore the text area can begin a new line wherever it encounter one.
Property of a Text area object
The property of a text area is:
| Property |
Description |
| value |
It specifies the text in the textarea. |
The following code creates three check boxes and one text area. The checkboxes have name ids and the names privacy, use and license. The text area has a name and ids of polices and it has 40 columns and 6 lines.
<p><b>Select the Police you agree with:<b></p>
<p><input type="checkbox" name="privacy" id="privacy"/>Privacy Policy</p>
<p><input type="checkbox" name="use" id="use"/>Acceptable User Policy</p>
<p><input type="checkbox" name="license" id="license"/>User License Agreement</p>
<p><textarea name="policies" id="policies" rows="6" cols="40"></textarea></p>
And its output looks like:
![display-data1-in-text-area.jpg]()
JavaScript code to display output in a text area
This describes the Java Script code that handles how to display data in a text area from the check box button.
Whenever JavaScript code runs, the code for the onload event attaches the event handler named updatePolicies to the onclick of each and every one of the check boxes. The event handler updates the text within the text area whenever one of each of the check boxes is changed. After the onload event handler attaches the updatePolicies function to the event, it calls the updatePolicies function to initialize the content of the text area.
When the updatePloicies function runs, the check boxes state will be stored in its corresponding variables, and in this code I create an empty variable named message that will store the message that will be displayed in the text area. If one of the check boxes is checked then the if statement creates a header for a message and adds a line for each of the check boxes that is checked, if you do not select any check box then the if statement creates a message indicating that.
The message will then be created, the event handler stores the message in the value of the text area and this message will be displayed in the text area of the web page.
<script>
var $ = function (id) {
return document.getElementById(id);
}
var updatePolicies = function () {
var privacy = $("privacy").checked;
var use = $("use").checked;
var license = $("license").checked;
var message;
if (privacy || use || license) {
message = "You agreed to these policies:\n\n";
if (privacy) {
message += "- Priavcy Policy\n";
}
if (use) {
message += "- Acceptable Use Policy\n";
}
if (license) {
message += "- User License Agremment\n";
}
}
else {
message = "You have not agreed to any policies.";
}
$("policies").value = message;
}
window.onload = function () {
$("privacy").onclick = updatePolicies;
$("use").onclick = updatePolicies;
$("license").onclick = updatePolicies;
updatePolicies();
}
</script>
Now I write the full code that displays the data in a text area when check boxes are checked.
Example
<html>
<head>
<script>
var $ = function (id) {
return document.getElementById(id);
}
var updatePolicies = function () {
var privacy = $("privacy").checked;
var use = $("use").checked;
var license = $("license").checked;
var message;
if (privacy || use || license) {
message = "You agreed to these policies:\n\n";
if (privacy) {
message += "- Priavcy Policy\n";
}
if (use) {
message += "- Acceptable Use Policy\n";
}
if (license) {
message += "- User License Agremment\n";
}
}
else {
message = "You have not agreed to any policies.";
}
$("policies").value = message;
}
window.onload = function () {
$("privacy").onclick = updatePolicies;
$("use").onclick = updatePolicies;
$("license").onclick = updatePolicies;
updatePolicies();
}
</script>
</head>
<body>
<?php
?>
<p><b>Select the Police you agree with:<b></p>
<p><input type="checkbox" name="privacy" id="privacy"/>Privacy Policy</p>
<p><input type="checkbox" name="use" id="use"/>Acceptable User Policy</p>
<p><input type="checkbox" name="license" id="license"/>User License Agreement</p>
<p><textarea name="policies" id="policies" rows="6" cols="40"></textarea></p>
</body>
</html>
Output
![display-data2-in-text-area.jpg]()