jQuery .change() does not work on the HTML text editor

Question

<select id="test">
    <option value="foo">Foo</option>
    <option value="bar">Bar</option>
</select>

<script>
$('#test').change(function(){
    $('#taskMessage').val($('#taskMessage').val()+" "+$('#test option:selected').text());
});
</script>


**<textarea class="summernote" id="taskMessage" name="taskMessage" data-plugin-summernote data-plugin-options='{ "height": 200, "codemirror": { "theme": "ambiance" } }'><?php echo htmlspecialchars($taskMessage); ?></textarea>**

What is the method to add the selected:option to the id:taskMessage . if simple textarea is added with the following code it works fine <textarea id="taskMessage"></textarea> but with the HTML editor it does not add the selected:option to the HTML text editor.

You are handling the change event for Select, not for the text area, it's not related to the problem, it works fine anyway,. the problem is in setting the value to the editor, for the normal `textarea` you use `.val()` and it works fine as you mentioned, so you just need to check how to set a value for your editor correctly — Zac, Jan 24 '21 at 07:57
@Zac thanks ;-( unfortunately, am bad in jQuery What should be the setting that can do the magic ? — Waqas, Jan 24 '21 at 08:04
it depends on the plugin that you use for the HTML editor, you need to read the documentation or specs of this plugin and search how to set a value dynamically using JavaScript — Zac, Jan 24 '21 at 08:05
`` >> this code works. How can I add the code that can add the tag on place where the mouse cursor. e.g if i add something it adds at the end of the paragraph. however if it add the tag at where the cursor is blinking will make my code perfect — Waqas, Jan 24 '21 at 13:49
Check this https://stackoverflow.com/questions/11076975/how-to-insert-text-into-the-textarea-at-the-current-cursor-position — Zac, Jan 24 '21 at 14:17

score 0 · Answer 1 · 2021-01-24T08:13:04.870

0

You're getting the value and it's work fine. check it here:

<select id="test">
    <option value="foo">Foo</option>
    <option value="bar">Bar</option>
</select>
<textarea class="summernote" id="taskMessage" name="taskMessage" data-plugin-summernote data-plugin-options='{ "height": 200, "codemirror": { "theme": "ambiance" } }'>hi I'm the textarea</textarea>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#test').change(function(){
    const selectValue = $('#test option:selected').text();
    const textValue = $('#taskMessage').val();
    console.log(textValue);
    $('#taskMessage').val(textValue+" "+ selectValue);
});
</script>

edited Jan 24 '21 at 08:13

answered Jan 24 '21 at 08:05

Thanks :-) but am not able to see the Bar and Foo in the HTML editor. `<?php echo htmlspecialchars($taskMessage); ?>` – Waqas Jan 24 '21 at 08:07
@Waqas check it again, I've edited the answer – Jan 24 '21 at 08:13
@Waqas Did you check the answer? – Jan 24 '21 at 12:28

score 0 · Answer 2 · answered Jan 24 '21 at 11:58

0

it worked by using .code

$('#taskMessage').code($('#taskMessage').code()+" "+$('#texteditor_selection option:selected').text());

answered Jan 24 '21 at 11:58

Waqas

53
4

score -1 · Answer 3 · answered Jan 24 '21 at 08:11

-1

Just add this css and check because your code is working fine as expected

CSS

textarea{
width: 400px;
height: 400px;
resize:none;
}

answered Jan 24 '21 at 08:11

Akshit Aggarwal

53
4

if I add the code the editor goes away and convert to the simple textarea. however if I manually add the textarea it works. so it means that the jquery is fine. as the above code works fine, but does not work with the HTML rich text editor. Either it could be conflicting the jQuery. – Waqas Jan 24 '21 at 08:18
This is a css code. It would help you to see that your code is working fine and when there is a change in the dropdown value, your textarea value get also updated. – Akshit Aggarwal Jan 24 '21 at 09:20

jQuery .change() does not work on the HTML text editor

3 Answers3