html markup in form field does not work

Question

I am creating a site that a user can login and write or paste a text in a form field like so

<textarea name="descr" id="descr" class="textformfront"  rows="24" cols="50" required onFocus="cleari();"></textarea>

The text is saved in a DB (postgreSQL 9.1-extended with PostGIS 2.0). The data type of the column in the DB is "text". Then the text is displayed in the front-end, in a div like so

<div id="formdescr" style="overflow-y:auto; height:400px; width:100%;"></div>

My problem is that if the user insert a long text in the form, with paragraphs and breaks, in the div none of those is displayed. In the div all I see is a continuous text with no breaks, no paragraphs.

How do I fix this?

Thanks.

UPDATE

I use nodejs 0.10.12 / websockets to transfer from DB to browser and from browser to DB. I put text in the div like document.getElementById("formdescr").innerHTML=descr; where descr came from websockets in the client. In the source code I see no text. The user has to search first and then the div will get text.

Answer 1

Your problem is that browsers ignore white space in content. Multiple spaces and new lines are all collapsed down into one space in the rendered output.

If you want to preserve all of the original formatting, with indents and line breaks, you could output the text into a <pre> block inside that div.

Your other option is to encode the white space into html entities. Use <br> for line breaks and   for spaces that should be preserved.

Answer 2

Your solution very likely depends on the backend programming language you use, not the database. I guess this should answer your question if you use php (and if not, you should be able to do the transfer ;-) )