Мониторинг html формы через JS

Решил добавить смайлики на сайт по вот этому примеру https://myrusakov.ru/php-comments-smile.html есть панель смайликов (каждый смайлк это ссылка с методом onclick(); и изображением смайлика) в методе onclick() стоит функция автоматической вставки кода смайлика в форму. Проверка на наличие в сообщении пользователя кодов смайликов происходит перед записью в базу, тоесть в базе они уже преобразованы в ссилки на иконку (картинку) смайлика, по этому при выводе они уже оображаются. Но возникла проблема, при роботе метода onclick() (функции вставки кода смайлика в форму) в самой форме во время редактирования в форме стоит код смайлика а не его изображение!

Теперь вопрос, как сделать чтобы при вводе (или встевке через onclick()...) в форму кода смайлика, он сразуже менялся на соответствующее изображение... Типо как в ВК нажал на смайлик и в форме именно смайлик а не его код... Может заменять коды слайликов на изображения еще до отправки???? Если да то как?

Код функции вставки смайлика:

 <script type="text/javascript">
 function set(){
 document.getElementById('m').value+='