CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Daniel Ellison
Daniel Ellison

Reputation: 1349

jQuery - .val to a textarea not preserving linebreaks

Not sure why my textarea is not picking up the line-breaks. I'm trying to prefill the textarea with a text template but I need it to preserve the line-breaks instead of having is in a single line. Would anyone know what I'm missing?

Here is an example https://jsfiddle.net/t8y1okpp/

Here is my HTML, pretty straight forward:

<textarea class="form-control" rows="5" id="Revue" style="width: 100%; min-height: 200px; white-space: pre;"></textarea>

And here is my JavaScript:

var revue_text_template ="Multi-Client impact? \
1: \
2: \
3? \

4? \ 5?"; var revue_text_template_filtered = revue_text_template.replace(/\r\n|\r|\n/g,"\n");

$('#Revue').val(revue_text_template_filtered);

Upvotes: 0

Views: 143

Answers (3)

choz
choz

Reputation: 17888

You should use \n for line break.

var revue_text_template = "Multi-Client impact? \nPrime Speaker(s): \n Component affected (infrastructure, application, server, network, etc.): \n Root Cause identified? If yes, what is the cause? \n How was the incident detected (alarm, client, vendor)? \n Was the incident caused by a planned change? If yes, what is the change number? \n Was recovery optimal? If not, why? \n Issues/gaps encountered?";
$('#Revue').val(revue_text_template);

Updated Fiddle

Or alternatively, you can use javascript heredoc to create template string, like..

var revue_text_template = `Line 0
Line 1,
Line 2,
Line 3,
Line 4`;

Upvotes: 2

Tushar
Tushar

Reputation: 87203

The string is just a normal single-line string which is splitted over multiple lines. So, it does not contain \r and/or \n characters.

Use ES6 Template strings.

Updated Fiddle

var revue_text_template = `Multi-Client impact?
Prime Speaker(s):
Component affected (infrastructure, application, server, network, etc.):
Root Cause identified? If yes, what is the cause?
How was the incident detected (alarm, client, vendor)?
Was the incident caused by a planned change? If yes, what is the change number?
Was recovery optimal? If not, why?
Issues/gaps encountered?`;

$('#Revue').val(revue_text_template);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<textarea class="form-control" rows="5" id="Revue" style="width: 100%; min-height: 200px; white-space: pre;">

</textarea>

In ES5, you can use Array#join

Fiddle

var revue_text_template = ["Multi-Client impact?",
    "Prime Speaker(s):",
    "Component affected(infrastructure, application, server, network, etc.):",
    "Root Cause identified ? If yes, what is the cause ?",
    "How was the incident detected(alarm, client, vendor) ?",
    "Was the incident caused by a planned change ? If yes, what is the change number ?",
    "Was recovery optimal ? If not, why ?",
    "Issues / gaps encountered ?"
];

$('#Revue').val(revue_text_template.join("\n"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<textarea class="form-control" rows="5" id="Revue" style="width: 100%; min-height: 200px; white-space: pre;"></textarea>

Upvotes: 1

Andrew Ngo
Andrew Ngo

Reputation: 762

Updated fiddle

Added in \r\n for line breaks.

var revue_text_template ="Multi-Client impact? \r\n\
Prime Speaker(s): \r\n\
Component affected (infrastructure, application, server, network, etc.): \r\n\
Root Cause identified? If yes, what is the cause? \r\n\
How was the incident detected (alarm, client, vendor)? \r\n\
Was the incident caused by a planned change? If yes, what is the change     number? \r\n\
Was recovery optimal? If not, why? \r\n\
Issues/gaps encountered?";

Upvotes: 0

Related Questions