CODEWITHSUNDEEP
javascripthtmljquery
Fatt Sky
Fatt Sky

Reputation: 680

Cannot show html value in JavaScript

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:

output

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.

Upvotes: 1

Views: 94

Answers (3)

Sana Mumtaz
Sana Mumtaz

Reputation: 833

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>

Upvotes: 1

leuquim
leuquim

Reputation: 655

As soon as the content is parsed by the browser you won't be able to access the HTML entities (&#13; and &#10;). 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.

Upvotes: 1

Stacks Queue
Stacks Queue

Reputation: 1132

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 &#13;

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>

Upvotes: 0

Related Questions