How can I "pre-fill" the value of a textarea in an HTML form?

HtmlForms

Html Problem Overview


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.

Html Solutions


Solution 1 - Html

<textarea>This is where you put the text.</textarea>

Solution 2 - Html

If your question is, how to fill a textarea:

<textarea>
Here is the data you want to show in your textarea
</textarea>

Solution 3 - Html

It's a HTML5 tag and will work only with modern browsers :)

<textarea placeholder="Add a comment..."></textarea>

Solution 4 - Html

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!

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionjasonmklugView Question on Stackoverflow
Solution 1 - HtmlAGoodDisplayNameView Answer on Stackoverflow
Solution 2 - HtmlTimView Answer on Stackoverflow
Solution 3 - HtmlValentin BorisovView Answer on Stackoverflow
Solution 4 - HtmlKarteMushroomPandasView Answer on Stackoverflow