I have a Dropdown with many Smojis, but what I want to do is that when a user clicks on the Dropdown smoji, it automatically appears written in the textarea ready to be sent in the chat.
I have my Dropdown and my textarea I just want to give it the aforementioned functionality.
Dropdown:
<!-- Dropdown Structure -->
<ul id='emotico' class='dropdown-content'>
<li><a href="#!">?</a></li>
<li><a href="#!">?</a></li>
<li><a href="#!">?</a></li>
<li><a href="#!">?</a></li>
<li><a href="#!">?</a></li>
<li><a href="#!">?</a></li>
<li><a href="#!">?</a></li>
<li><a href="#!">?</a></li>
<li><a href="#!">?</a></li>
<li><a href="#!">?</a></li>
<li><a href="#!">?</a></li>
<li><a href="#!">?</a></li>
</ul>
Form and textarea:
<form class="col s12" method="POST" enctype="multipart/form-data">
<div class="row">
<div class="input-field col s12">
<!-- Smogis -->
<i class="material-icons prefix dropdown-trigger" data-target='emotico'>insert_emoticon</i>
<textarea id="messege" name="messege" class="materialize-textarea" required></textarea>
<label for="messege">Escribe un mensaje...</label>
<input type="hidden" id="receptor" value="<?=$receptor?>" />
<div class="red-text" id="respuesta"></div>
<!-- Boton de publicar -->
<button class="btn waves-effect btn-color right" id="submit" type="button" name="public">Enviar
<i class="material-icons left">near_me</i>
</button>
<span class="helper-text" data-error="wrong" data-success="right">
<div class="file-field input-field">
<span class="file-path-wrapper">
<i class="material-icons prefix">photo_camera</i>
<input id="photo" name="photo" type="file">
</span>
</div>
</span>
</div>
</div>
</form>
I have created a Chat to which I can give my Smojis in this way. The first thing is that I have created a separate PHP file inside a folder called
smojis
and there I have placed the structure of the DropdownDropdown structure:
Then create a JS file where you develop the logic to place the Smojis in the textarea with property
value
So that you know how it works, I have placed an id in each span of the unordered list , which will be the identifier for the JS logic to obtain the information of that span in a variable and then create a function that in it what is being done is by placing inside the textarea the information that contains that span
NOTE: in case you didn't notice at the top I am also getting the textarea to be able to place the span value inside the textarea