In short, I made a form to send a message. In it he made a div with images (emoji). To each image I added onclick = 'smiles ("here id emodzhi")' And everything seemed to be normal, when I clicked on some image, he added smidi ID in the form in textarea But the problem is that if I click on this image , the id is inserted into the textarea, and I’ll write something, then I’ll click on the image again, the id will not be inserted. WHY? Here is the code itself, it is abbreviated, without html, body, head https://pastebin.com/XsC8M35Q

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript"> function smiles(id) { $("textarea[name='message']").append(id); } </script> <form action="code.php" id="sender" method="POST" name="form_send_message"> <textarea name="message" minlength="0" maxlength="255" placeholder="Введите сообщение" required><?php echo $_SESSION['msg_mess_err']; unset($_SESSION['msg_mess_err']); ?></textarea> <input type="hidden" value="<?php echo $user_id; ?>" style="width: 0px; height: 0px;" name="recipient_id" /> <input type="submit" name="btn_send_message" value="Отправить"> <br/><br/> <div id="smiles"> Нажмите на эмоджи чтоб его выбрать<br/> <img src="/images/smiles/1.gif" onClick='smiles("[sml1]");'> <img src="/images/smiles/2.gif" onClick='smiles("[sml2]");'> <img src="/images/smiles/3.gif" onClick='smiles("[sml3]");'> <img src="/images/smiles/4.gif" onClick='smiles("[sml4]");'> <img src="/images/smiles/5.gif" onClick='smiles("[sml5]");'> <img src="/images/smiles/6.gif" onClick='smiles("[sml6]");'> <img src="/images/smiles/7.gif" onClick='smiles("[sml7]");'> <img src="/images/smiles/8.gif" onClick='smiles("[sml8]");'> <img src="/images/smiles/9.gif" onClick='smiles("[sml9]");'> <img src="/images/smiles/10.gif" onClick='smiles("[sml10]");'> <img src="/images/smiles/11.gif" onClick='smiles("[sml11]");'> <img src="/images/smiles/12.gif" onClick='smiles("[sml12]");'> <img src="/images/smiles/13.gif" onClick='smiles("[sml13]");'> <img src="/images/smiles/14.gif" onClick='smiles("[sml14]");'> <img src="/images/smiles/15.gif" onClick='smiles("[sml15]");'> <img src="/images/smiles/17.gif" onClick='smiles("[sml17]");'> <img src="/images/smiles/18.gif" onClick='smiles("[sml18]");'> <img src="/images/smiles/19.gif" onClick='smiles("[sml19]");'> <img src="/images/smiles/20.gif" onClick='smiles("[sml20]");'> <img src="/images/smiles/21.gif" onClick='smiles("[sml21]");'> <img src="/images/smiles/22.gif" onClick='smiles("[sml22]");'> <img src="/images/smiles/23.gif" onClick='smiles("[sml23]");'> <img src="/images/smiles/24.gif" onClick='smiles("[sml24]");'> <img src="/images/smiles/25.gif" onClick='smiles("[sml25]");'> <img src="/images/smiles/26.gif" onClick='smiles("[sml26]");'> <img src="/images/smiles/27.gif" onClick='smiles("[sml27]");'> <img src="/images/smiles/28.gif" onClick='smiles("[sml28]");'> <img src="/images/smiles/29.gif" onClick='smiles("[sml29]");'> <img src="/images/smiles/30.gif" onClick='smiles("[sml30]");'> <img src="/images/smiles/31.gif" onClick='smiles("[sml31]");'> </div><br/> </form>

  • Re-write the question, give a self-sufficient, reproducible example and how to ask a good question , and your link is non-working, requires registration to view - Air
  • I updated the link, now must work - Mr Danil
  • lay out an example of the court code - Air

1 answer 1

I have reproduced your example. Through the developer tools it is clear that the id of the smilies are added to the textarea tag in any case, can you see them in the text field or not. The reason for this behavior is how the browser connects the value of the form fields and the text inside the textarea tag (this is not exactly the same thing). At some point, the browser fills the field of its internal form object with text from textarea and no longer follows the text inside the tags. When you type something in the text box, the browser changes the value of this form object in its memory. In the developer’s tools, you can clearly see that the manually entered text does not appear between the tags, while it is on the page. Thus, it is necessary to change the value of the form element, and not the text inside the tags. To do this, use the jQuery method val ().

 var text = $("textarea[name='message']"); text.val(text.val()+id);
  • Thank. I will try - Mr Danil
  • Everything worked, thanks. - Mr Danil
  • one
    Once my answer has helped you, then mark it as a solution, please. - Yury Plinto