Displaying data-message in a textarea

Question

$(document).ready(function() {
  $('textarea').val($('textarea').data('message'));
});

.testtextarea {
  outline: none;
  resize: none;
}

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>

<body>
  <h2>Test Page</h2>
  <textarea class="testtextarea" data-message="Hello World"></textarea>
  <textarea class="testtextarea" data-message="Test Text Area"></textarea>
  <textarea class="testtextarea" data-message="Hello Universe"></textarea>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</html>

Anyone here knows how to fix this issue? the only data-message it is showing is the data-message for the first one. What I am trying to do here is to make it show its respective data message per textarea.

Thanks

https://api.jquery.com/each/ – Quentin Jun 13 '16 at 08:04 — Quentin, Jun 13 '16 at 08:04

score 4 · Answer 1 · answered Jun 13 '16 at 08:06

You can provide a function to the val() method which reads the data attribute from each textarea. Try this:

$('textarea').val(function() {
    return $(this).data('message');
});

$(document).ready(function() {
  $('textarea').val(function() {
    return $(this).data('message');
  });
});

.testtextarea {
  outline: none;
  resize: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Test Page</h2>
<textarea class="testtextarea" data-message="Hello World"></textarea>
<textarea class="testtextarea" data-message="Test Text Area"></textarea>
<textarea class="testtextarea" data-message="Hello Universe"></textarea>

score 2 · Accepted Answer · answered Jun 13 '16 at 08:05

Loop through all textarea and set value accordingly using $(this)

$( document ).ready(function() {
  $('textarea').each(function() {
    $(this).val($(this).data('message'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<h2>Test Page</h2>
<textarea class="testtextarea" data-message="Hello World"></textarea>

<textarea class="testtextarea" data-message="Test Text Area"></textarea>

<textarea class="testtextarea" data-message="Hello Universe"></textarea>

score 2 · Answer 3 · answered Jun 13 '16 at 08:05

You have to set text in the current element this context. You need to iterate and set the value. .val(function) or .each() can be used

$('textarea').val(function(_, val) {
   return $(this).data('message')
});

$(document).ready(function() {
  $('textarea').val(function(_, val) {
    return $(this).data('message')
  });
});

.testtextarea {
  outline: none;
  resize: none;
}

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>

<body>
  <h2>Test Page</h2>
  <textarea class="testtextarea" data-message="Hello World"></textarea>

  <textarea class="testtextarea" data-message="Test Text Area"></textarea>

  <textarea class="testtextarea" data-message="Hello Universe"></textarea>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>


</html>

score 1 · Answer 4 · answered Jun 13 '16 at 08:12

1

$(document).ready(function(){
    $('.testtextarea').val(function () { return $(this).attr('data-message')});
});

answered Jun 13 '16 at 08:12

Roysh

1,542
3
16
26

Displaying data-message in a textarea

4 Answers4