Retrieve data after pressing submit button

Question

<div class="chat-input-holder">
         <textarea class="chat-input"></textarea>
         <input type="submit" value="Send" class="message-send"/>
     </div>

How to retrieve data in textarea field after clicking on submit button. Using jquery, ajax?

Answer 1

This code should work:

 function getdata(Event){ Event.preventDefault() let chatInput = $('#chat-input').val(); $('#result').text(chatInput) } $('#message-send').click(getdata);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <form class="chat-input-holder"> <.-- replace div with form --> <textarea class="chat-input" id="chat-input"></textarea> <input type="submit" value="Send" id="message-send" class="message-send"/> </form> <p> for the example we will place the text on the div bellow. but use the data however you like</p> <div id='result'> </div>

Note that I changed the div tag into a form tag, and added some IDs.

Answer 2

You can find here a solution using jQuery. The output is currently store in a div with id="out" , you can customize the code.

 document.forms["chat-input-holder"].addEventListener('submit', e => { e.preventDefault(); let text = $(".chat-input").val(); $("#out").html(text); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="chat-input-holder"> <textarea class="chat-input"></textarea> <input type="submit" value="Send" class="message-send"/> </form> <div id="out"></div>