Cannot show html value in JavaScript

Question

I have tried to use javascript to alert the selected textarea value. I am using $("#kandungan_email").html(); to get the whole HTML value include 
, but it cannot get 


Below is my code:

function hantar_terpilih(){
var content = $("#kandungan_email").html();
alert(content);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea type="text" rows="9" class="form-control" id="kandungan_email" name="kandungan_email" value="" title="Kandungan Email">Title:TEST&#13;&#10;Time:12PM&#13;&#10;Place:Guangzhao&#13;&#10;Please login to http://google.com for more details&#13;&#10;Lampiran : http://google.com &#13;&#10;Thanks.</textarea>

<button type="button" id="updateBtn_5" class="btn btn-sm btn-primary" onclick="hantar_terpilih()">Hantar yang terpilih</button>

The result is shown like below:

Actually, I want the result to be shown like below, just show all HTML value:

Title:TEST&#13;&#10;Time:12PM&#13;&#10;Place:Guangzhao&#13;&#10;Please login to http://google.com for more details&#13;&#10;Lampiran : http://google.com &#13;&#10;Thanks.

Hope someone can guide me on how to solve this problem. Thanks.

Note: Don't effect shown in the textarea value.

@AmitVerma If change &to &. it will also show in the textarea. — Fatt Sky, Jul 07 '21 at 09:48
Try this solution: https://stackoverflow.com/questions/3353129/jquery-escaping-html-from-a-textarea — Mr_T, Jul 07 '21 at 09:53

score 1 · Answer 1 · answered Jul 07 '21 at 10:08

As soon as the content is parsed by the browser you won't be able to access the HTML entities ( and 
). If you can store the content in a JavaScript string, you can display it's original form in the alert.

function hantar_terpilih(){
    var content = 'Title:TEST&#13;&#10;Time:12PM&#13;&#10;Place:Guangzhao&#13;&#10;Please login to http://google.com for more details&#13;&#10;Lampiran : http://google.com &#13;&#10;Thanks.';
    alert(content);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea type="text" rows="9" class="form-control" id="kandungan_email" name="kandungan_email" title="Kandungan Email">Title:TEST&#13;&#10;Time:12PM&#13;&#10;Place:Guangzhao&#13;&#10;Please login to http://google.com for more details&#13;&#10;Lampiran : http://google.com &#13;&#10;Thanks.</textarea>
<button type="button" id="updateBtn_5" class="btn btn-sm btn-primary" onclick="hantar_terpilih()">Hantar yang terpilih</button>

If you have many textareas with different contents you will need to choose a strategy to relate the textearea / button to the corresponding javascript variable holding the string.

score 1 · Answer 2 · answered Jul 07 '21 at 12:17

The approach I've used is to apply JSON.stringify on the primitive string. Then I'd replaced \r and \n with their ASCII code. Finally, I've removed the quotes around the value.

function hantar_terpilih() {
  var content = JSON.stringify($("#kandungan_email").html());
  content = content.replace(/\\r/g, `&#13;`);
  content = content.replace(/\\n/g, `&#10;`);
  if (content.charAt(0) === '"' && content.charAt(content.length - 1) === '"') {
    content = content.substr(1, content.length - 2);
  }
  alert(content);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea type="text" rows="9" class="form-control" id="kandungan_email" name="kandungan_email" value="" title="Kandungan Email">Title:TEST&#13;&#10;Time:12PM&#13;&#10;Place:Guangzhao&#13;&#10;Please login to http://google.com for more details&#13;&#10;Lampiran : http://google.com &#13;&#10;Thanks.</textarea>

<button type="button" id="updateBtn_5" class="btn btn-sm btn-primary" onclick="hantar_terpilih()">Hantar yang terpilih</button>

score 0 · Answer 3 · answered Jul 07 '21 at 09:51

textarea is an escapable raw text element see here

any characters or letters after the "&" and that ends with ";" (semicolon) gets parsed as a character reference. (eg. (&)nbsp;)

so used &amp#13; instead of 

function hantar_terpilih(){
var content = $("#kandungan_email").html();
alert(content);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea type="text" rows="9" class="form-control" id="kandungan_email" name="kandungan_email" value="" title="Kandungan Email">Title:TEST&amp#13;&amp#10;Time:12PM&amp#13;&#10;Place:Guangzhao&amp#13;&amp#10;Please login to http://google.com for more details&amp#13;&amp#10;Lampiran : http://google.com #13;&amp#10;Thanks.&amp#13;&amp#10;</textarea>

<button type="button" id="updateBtn_5" class="btn btn-sm btn-primary" onclick="hantar_terpilih()">Hantar yang terpilih</button>

Can don't effect show in the textarea value. Because textarea show ` ` — Fatt Sky, Jul 07 '21 at 09:54

Cannot show html value in JavaScript

3 Answers3