Question

I’m having a problem on displaying values that were from a textarea.

I wanted users to enter some text in my textarea at the same time they may enter a new line(they will hit enter) then after that one, I want to get the value of that textarea and display it in my <span> tag.

The problem here is that new lines aren’t displaying in my span tag, I don’t know what happen.

For example a user has type something like this in in my text area:

Hello World!

How Are you?!

The problem is that in my span tag, it displays without new line, so the outcome is like this:

Hello World! How Are you?!

I don’t want to use some WYSIWYG application just to allow new lines in my span. I believe there’s a way for this one.

Please guide me on this one. Your help wouldbe greatly appreciated!

Thanks! 🙂

Answer 1

It is normal for the browser to compress multiple white-space characters and newline characters back to a single space. Inserting <br> elements where you want line breaks is the usual method.

Your question is tagged with both PHP and JavaScript, but you don’t need both for this task. If you’re displaying data from a database then it’d be best to do the processing in PHP code. For dynamic page updates in the browser you’d use JS.

In PHP use nl2br() when preparing the text that ends up in the span:

echo nl2br($strWithNewLines);

Or in JS:

var stringWithBrs = strWithNewlines.replace(/\n/g, '<br />')