Bravo Bravo - 6 months ago 26
HTML Question

Textarea doesn't render newline from DB

I have two

<textarea>
elements on a web page. When a user submits text in the first
<textarea>
, the text is inserted into a database. The text is then retrieved from the database and stored in the second
<textarea>
using Javascript.

The second textarea doesn't render the text if the characters from database contains newline characters.

If I type a word without newline, everything works great:

enter image description here

But the following one doesn't work.

enter image description here

The
var_dump($output)
for

n
e
w
l
i
n
e


is

string(19) "n e w l i n e"


My Code:

HTML

<form action="" method="get">
<textarea name="input" rows="5"></textarea> <br>
<input type="submit" name="go"><br>
<textarea name="output" id="id_ouput" rows="5"></textarea>
</form>


PHP

<?php
...
...
$input=$_GET['input'];

$insert = $koneksi->query("insert into data values ('".$input."')");
$select = $koneksi->query("SELECT * FROM data"); // data is column
foreach ($select as $tampung){
$output = $tampung['text'];
}

// use JS to access <textarea>' value attribute
?>
<script>
document.getElementById('id_ouput').value= "<?php echo $output ?>";
</script>
<?php

...

?>

Answer

The problem is that your PHP code is outputting a malformed JavaScript string literal.

According to ECMA-262, a double quoted string literal can contain any source character, except the double quote ("), backslash (\) and LineTerminator characters, where a LineTerminator is one of

  • \u000A (Line Feed)
  • \u000D (Carriage Return)
  • \u2028 (Line separator)
  • \u2029 (Paragraph separator)

You need to convert those characters into suitable JavaScript escape sequences, and you will also have to convert the < and & characters that have special meaning in an HTML document.

Most of the characters are simple ASCII characters which makes them trivial to replace using strtr() with a translation table, assuming that your HTML document is using a reasonable (ASCII-compatible) character encoding.

The Line and Paragraph separators are trickier because the translation will depend on what character encoding your HTML document is using. If you're using UTF-8, those characters can be added to the translation table as follows:

<?php

  $conversion = array (
    '<'            => '&lt;',
    '&'            => '&amp;',
    '"'            => '\\"',
    '\\'           => '\\\\',
    "\r"           => '\\r',
    "\n"           => '\\n',
    "\xe2\x80\xa8" => '\\u2028',
    "\xe2\x80\xa9" => '\\u2029',
  );

  $output = $tampung['text'];
  $value = strtr ($output, $conversion);

  echo <<<_
<script>
     document.getElementById('id_ouput').value="$value";
</script>
_;

The PHP addcslashes() documentation has similar solutions in the comments section.


Of course, a much simpler solution would be to output the <textarea> value directly from PHP:

<?php

  $output = $tampung['text'];
  $value = htmlspecialchars ($output);

  echo <<<_
    <textarea name="output" id="id_ouput" rows="5">$value</textarea>

_;

But I'm guessing that your situation might be a little more complicated.

Comments