How do I get my textarea to preserve newlines when using jQuery and JSON?

Question

I have a textarea for users to input comments and a button to submit using jQuery’s .post() and JSON:

$('#submit').click(function () {
    var comment = {};
    comment.Author = $("#author").val();
    comment.Email = $("#email").val();
    comment.WebSite = $("#url").val();
    comment.Body = $("#comment").val(); // textarea

    $.post('/ajax/comments', comment, parseComment, 'json');

But $("#comment").val() does not seem to preserve newlines (the input is losing newlines). How do I get this to work?

Answer 1

A textarea does not insert <br> tags in a users input for line breaks, rather it simply includes the newline character \n.

This snippet will show an alert box when you click the button, which has the broken line.

<script type="text/javascript">
  $(document).ready(function(){
    $('#submit').click(function() { alert($('#comment').val()); })
  });
</script>

<textarea id='comment'></textarea>
<input type='submit' id='submit'/>

If you need to display these in the html page, you need to replace the \n with <br> yourself.

Answer 2

use $('#comment').val().replace( /\n/g, '<br \\>' );.