Textarea value not retaining line breaks from variable

Question

I have a textarea that needs to retain the submitted value and format after submission, but for some reason \\n does not seem to get passed from the variable php variable.

$text = '1\n2\n3';

echo '<script>
var text = "'.$text.'";
$( document ).ready(function() {
    $("textarea").attr("placeholder","1) Start Each Comment On A New Line...");
    $("textarea").val(text);
});

</script>'

The variable is passed from php to JS. When I echo the variable I get the expected result:

1\n2\n3

When the variable is assigned to the textarea value the result is:

123

Instead of:

1
2
3

Now if I change the js to the following I get the expected result with each number on a new line.

$("textarea").val("1\n2\n3");

Does anyone know why the php variable is not passing the \\n returns to JS?

Answer 1

Using json encode should escape your line breaks in a way JS will understand.

$text = json_encode('1\n2\n3');

echo '<script>
var text = JSON.parse("'.$text.'");
$( document ).ready(function() {
    $("textarea").attr("placeholder","1) Start Each Comment On A New Line...");
    $("textarea").val(text);
});

</script>'

Answer 2

You should use this.

    <script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>

<textarea rows="4" cols="50">
</textarea>


<?php

$text = '1\n2\n3';

echo '<script>
var text = "'.$text.'";
$( document ).ready(function() {
    $("textarea").attr("placeholder","1) Start Each Comment On A New Line...");
    $("textarea").val(text);
});

</script>'
?>

Answer 3

The problem is you are expecting Browser Javascript to understand PHP's "\\n" character. That will not work. Also, your code uses the single quote to denote the newline character. PHP requires that you use double quotes to denote the newline special character.

There are at least two ways you can fix this.

The first is to use PHP's nl2br() function. In that case, your code could be rewritten as:

$text = "1\n2\n3"; //notice the use of double quotes.

echo '<script>
var text = "'. nl2br($text).'";
$( document ).ready(function() {
    $("textarea").attr("placeholder","1) Start Each Comment On A New Line...");
    $("textarea").val(text);
});

</script>'

A second way is to use the HTML
tag directly in your variable declaration. This would obviate the need to use PHP's nl2br() function.

$text = '1<br>n2<br>n3';

echo '<script>
var text = "'.$text.'";
$( document ).ready(function() {
    $("textarea").attr("placeholder","1) Start Each Comment On A New Line...");
    $("textarea").val(text);
});

</script>'

Either of both approaches should work.

Answer 4

$text = '1\n2\n3';

change to double quote sign:

$text = "1\n2\n3";

In PHP double quote " and single quote ' not parse equal. For something we need use double quote, like this.

For: $text = "\\n1\\n2\\n3\\n";

Source Page view would be:

<script>
var text = "
1
2
3
";
$( document ).ready(function() {
    $("textarea").attr("placeholder","1) Start Each Comment On A New Line...");
    $("textarea").val(text);
});

</script>