How to pass values to textarea of a form with jquery

Question

I am trying to pass a value to a form textarea using jquery. I am able to pass a value to a hidden input area using the code below, but not able to use the same code to pass to a textarea

 <html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.0.6/jquery.tinymce.min.js"></script>
<form>
<textarea class="tinymce" id="test"></textarea>
<button id="generate">Generate</button>
</form>

<script type="text/javascript">
    $(document).on('click','#generate',function() {

    tinyMCE.get('test').setContent('test content');
});
</script>

</html>

I tried passing values using both val and attr, but they both do not work unless the input type is hidden, I expected the textarea to show the values generated by jquery.

You might want to check this. https://stackoverflow.com/a/2788289/5840542 — Khant Htet Naing, May 26 '19 at 10:07
There's nothing wrong with the code you've provided `$("#textareaid").val("new text");` - you might like to create a *snippet* that demonstrates the problem. Have a read of [mcve]. — freedomn-m, May 26 '19 at 10:19
The problem was I was using tinyMCE which needed a different code to pass the value as edited above. Thanks. — Smith Waliko Msiska, May 26 '19 at 11:25

score 0 · Answer 1 · edited May 26 '19 at 10:17

0

$(function() {
  $('#test').val('This is a test');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="test"></textarea>

edited May 26 '19 at 10:17

freedomn-m

27,664
8
35
57

answered May 26 '19 at 10:06

HappyAnt

355
1
9

You might like to add a commentary detailing how this fixes OP's issues – freedomn-m May 26 '19 at 10:18
Exactly what I am doing, not working. Only working if am passing the value to a hidden input area. Please note, I am using tinyMCE, could that be a contributing factor? – Smith Waliko Msiska May 26 '19 at 10:20
Please try running the edited code above on your machine, and advice if it works. – Smith Waliko Msiska May 26 '19 at 10:42
Text is inserted into textarea on click Edit: Then page reloads because of submitting the form. – HappyAnt May 26 '19 at 10:44
So, I should try preventing default? – Smith Waliko Msiska May 26 '19 at 10:58
I don't know what you are trying to do, but the inserted text is clearly visible for a moment, so it's safe to say that the code works. – HappyAnt May 26 '19 at 11:09
The issue was the tinyMCE found a solution as edited above. Thanks – Smith Waliko Msiska May 26 '19 at 11:23

How to pass values to textarea of a form with jquery

1 Answers1