Save multi-line text from textarea

Question

I have a form which contains a <textarea>....</textarea> field. after saving the text it shows the result in another form but in paragraph <p>...</p>

the problem is it shows all lines connected together as one line

when I go to edit field, the line are presented correctly (multi-lines)

how to show all line as entered in <textarea>....</textarea>?

Answer 1

There are two ways to solve this problem-

1. Using <br> tags

   You need to convert your new lines to <br> tags while displaying the data in your paragraph <p>. Something on the following lines will help-

   var value = $('.textareaClass').val();
   $('.paragraphClass').html('<p>'+(value.replace(/\r?\n/g,'<br/>'))+'</p>');
   

2. Using CSS rules

   Another simpler way to do this is by using CSS, in which, you simply have to add the rule white-space: pre-wrap to your <p> class. For example, if your paragraph has class text-content then you simply have to do-

   .text-content {
       white-space: pre-wrap;
   }
   

   DEMO: JSFiddle

Hope this helps!

Answer 2

You need to replace newline with <br> to provide new line in html

$('#text').on('input', function() {
  $('#res').html(this.value.replace(/\r?\n/g, '<br>'));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id=text></textarea>
<div id=res></div>

---

Or you need to wrap each string after newline in p tag

$('#text').on('input', function() {
  $('#res').html('<pr>' + this.value.split(/\r?\n/).join('</p><p>') + '</p>');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id=text></textarea>
<div id=res></div>