How can I "pre-fill" the value of a textarea in an HTML form? [duplicate]
I'm creating a simple back-end app through which the user can create/update/delete database rows (in this case, job listings).
When it comes time for the user to edit an existing listing, I'm trying to pre-fill most of the HTML form with the data from that existing row. I've done this sucessfully for text inputs using the "value" property, and with selects using a bit of php in each option tag: if([conditionforoption]){echo'selected'}.
The input type that I'm having trouble pre-filling is the textarea... any thoughts on how to get the existing data (a long varchar string) to be present in the textarea input when the user loads the page?
I'm trying to stay away from a javascript solution if at all possible, but I'll use it if necessary.
Solution 1:
<textarea>This is where you put the text.</textarea>
Solution 2:
If your question is, how to fill a textarea:
<textarea>
Here is the data you want to show in your textarea
</textarea>
Solution 3:
It's a HTML5 tag and will work only with modern browsers :)
<textarea placeholder="Add a comment..."></textarea>
Solution 4:
To fill out a textarea's value, you insert text inside the tag like this:
<textarea>Example of content</textarea>
In the code, the "Example of content" text will become the textarea's value. If want to add to the value, that is, take a value and add another string or data type do it, you would do this in JavaScript:
<textarea id="test">Example of</textarea>
<!--I want to say "content" in the textarea's value, so ultimately it will say
Example of content. Pressing the "Add String To Value" button again will add another "content" string onto the value.-->
<input type="button" value="Add String To Value" onclick="add()"/>
<!--The above will call the function that'll add a string to the textarea's value-->
<script>
function add() {
//We first get the current value of the textarea
var x = document.getElementById("test").value;
//Then we concatenate the string "content" onto it
document.getElementById("test").value = x+" content";
}
</script>
Hope that gave you both an answer and an idea!