Using jQuery how can I set the contents of a textarea when the value from MySQL contains newlines

Question

To keep my code clean I am defaulting each of the elements of a form with jQuery.

i.e My form contains elements like this..

<input name="mobile" id="mobile" type="text" />

In my separate javascript file, I read data from MySQL, then use jQuery to set it, after the form is loaded..

$('#mobile').val('07845 887766');

this value is read from MySQL and I generate the code like this, in PHP..

echo "\n $('#mobile').val('".$user['mobile']."');";

This works fine, but the problem lies when there is a textarea field..

<textarea name="notes" id="notes" ></textarea>

echo "\n $('#notes').html('TEST');";

This works fine, but when I replace it with the data from a database, which can contain newlines, I get a javascript error.

echo "\n $('#notes').html('".$user['notes']."');";

This could produce this code (Actual values...)

$("#notes").html("INSERT INTO action    (
                    inputdate,
                )
                VALUES ()");

Which gives an error. "unterminated string literal"

Don't use single quotes and read this http://stackoverflow.com/questions/242813/when-to-use-double-or-single-quotes-in-javascript — austinbv, Apr 28 '11 at 15:47
If the output is truly as in the last code block, then there shouldn't be any javascript error. Can you double check the contents of `$user['notes']` and update your question with the value? — Gary Green, Apr 28 '11 at 15:49
Gary: The actual code generated is this (copy and paste - real values) $("#code").html("INSERT INTO action ( inputdate, ) VALUES ()"); - The edit box here is not showing carriage returns... See orignal post... — Rob, Apr 28 '11 at 15:55
Ah I see. Please find amended answer below. It'll fix everything. — Gary Green, Apr 28 '11 at 17:48

score 1 · Answer 1 · answered Apr 28 '11 at 15:44

1

it could be single quotes instead of double quotes, try this:

echo PHP_EOL.'$("#notes").html("'.$user['notes'].'");';

answered Apr 28 '11 at 15:44

Naftali

144,921
39
244
303

Unfortunately not. BTW, the error I get is "unterminated string literal" – Rob Apr 28 '11 at 15:48

score 0 · Answer 2 · answered Sep 16 '14 at 18:59

0

If you are using smarty templating engine you can use it like --

$('textarea#myTextAreaId').val({$arrVal.keyValue|@json_encode});

otherwise its common to face this problem as currently .val() on textarea elements strips carriage return.

answered Sep 16 '14 at 18:59

Bharat

646
1
8
12

Gary Green · Accepted Answer · 2011-04-28T17:48:01.407

unterminated string literal

You're getting this message because in Javascript you can't span literal strings across multiple lines.

What you need to do is replace newlines in $user['notes'] with the characters \r\n so all the string is on one line then the <textarea> input will correctly show each item on a new line.

Let's use json_encode to help us also escape any nasty characters which Javascript won't like.

// This will convert to be Javascript friendly. 
// Output string will be enclosed in quotes " "
$notes_str = json_encode($user['notes']);
echo "\n $('#notes').html(" . $notes_str . ");";

score 0 · Answer 4 · answered Apr 28 '11 at 17:36

Replace your line returns with \n, something like this:

echo "\n $('#notes').html('".str_replace("\n","\\n",$user['notes'])."');";

php is not my strongest suit, so the syntax may be slightly off. But basically replace the line returns with the characters "\n". (may need to handle /r too I guess, or a combination of the two)

EDIT: Apparently if you're using PHP 5.2 or greater you can use json_encode( and it will handle quotes and newlines.

Using jQuery how can I set the contents of a textarea when the value from MySQL contains newlines

4 Answers4

Linked