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 oute 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! :)

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 oute 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! :)

• php
• javascript
• mysql
• html

• 2 Try echoing content with nl2br($string to be echoed) – asprin Commented Aug 2, 2012 at 5:35
• It would be good to see what code you are currently using to update the <span> with the information from the textarea. – Nick Perkins Commented Aug 2, 2012 at 5:36
• stackoverflow./search?q=%5Cn+br – mplungjan Commented Aug 2, 2012 at 5:37

3 Answers 3

Textarea's make \n's, what you want is the html equivalent <br /> so use this string replace to replace all the \n's to <br />'s and you're golden.

In javascript it would be

str = str.replace(/\n/g, '<br />');

In php it would be

$str = nl2br($str);

It is normal for the browser to press 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 />')

Try this trick.

<pre><span id="wrapContent">
    <?php echo $str; ?>
</span></pre>