How to submit <textarea> value using javascript?

Question

I have a chrome extension for personal use to change certain websites I visit. One site has a <textarea> which you can type in. There is no submit button. You must press enter for what you typed to be submitted. There are no form tags anywhere either.

<div id="chatRoot">
    <div data-reactroot="" class="chat-box-wrap_20_R_" style="min-width: 1180px;">
        <div class="chat-box_Wjbn9 faction_2T9gm chat-active_1Sufk">
            <div class="chat-box-input_1SBQR ">
                <div>
                    <textarea name="chatbox" maxlength="840" class="chat-box-textarea_2V28W">
                    </textarea>
                </div>
            </div>
         </div>
     <!-- react-empty: 216 -->
     </div>
</div>

I have tried creating a keyboard event and dispatching that with the enter key code, and while I believe it worked, it was rejected as an 'untrusted keypress.'

How do I submit data to a textarea that has no form tags, no submit buttons, which only accepts the ENTER button as a valid form of submission, using vanilla javascript?

*I do not want to have to push the enter button. I want my chrome extension to automatically input data into the textarea (which I have no problems with), and then have my chrome extension automatically submit the data it inputted (which is where my problem lies).

Thank you.

Answer 1

you can use XMLHttpRequest():

<textarea name="chatbox" maxlength="840" class="chat-box-textarea_2V28W"> </textarea>

function submitOnEnter(event) {
  if (event.which === 13) {
    console.log('TEST')
    var textArea = document.querySelector("textarea");
    var parameters = textArea.name + "=" + textArea.value;
    var http = new XMLHttpRequest();
    http.open("POST", "your_url_for_handling_post", true);
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.setRequestHeader("Content-length", parameters.length);
    http.setRequestHeader("Connection", "close");
    http.onload = function() {
      //write code after receiving the content
    };
    http.send(parameters);
  }
}

document.querySelector("textarea").addEventListener("keypress", submitOnEnter);

Answer 2

The following should work. You just have to make 1 modification to your current code: You must add an id to your text area. If you copy the code that's included then you can do this.

There is another issue that this does workaround. If you press enter, it starts a new line. This doesn't work. If you just press enter, it will submit the message. With this, if you press shift+enter, then it will start a new line. If you just press enter, then it will submit it! This means that you can submit multi-line messages and submit the messages with the enter key.

A detailed walk-through of everything that's happening in the code is included in the form of comments.

 // get the chatbox and set the default value for if the shift key and enter key was pressed var chatbox = document.getElementById("chatbox_main"), shiftPressed = false, enterPressed = false; // listen for the user to press a key chatbox.addEventListener("keydown", function(e) { // check if the shift key was pressed and say if it was if (e.shiftKey) shiftPressed = true; // check if the enter key was pressed if (e.keyCode == 13) { // prevent the enter key from putting in a new line. If shift it pressed, it will be manually added later e.preventDefault(); // say that the enter key was pressed enterPressed = true; } }); // listen for the user to let go of a key chatbox.addEventListener("keyup", function(e) { // check if the shift key or enter key was released if (e.shiftKey || e.keyCode == 13) { // check if the enter key was pressed, and if it wasn't, then reset the shift pressed value because it was only shift that was pressed if (!enterPressed) shiftPressed = false; // enter was pressed, so move on else { // make sure that shift wasn't pressed along with enter if (!shiftPressed) { // get the input from the chatbox and define if the chatbox should be cleared var input = chatbox.value; // prevent the enter key from being typed into the chatbox e.preventDefault(); // run you custom code here! alert("You submitted this:\\n" + input); // clear the chatbox chatbox.value = ""; // reset the value enterPressed = false; // shift and enter was pressed, so move on } else { // shift + enter was pressed, so put in a new line chatbox.value += "\\n"; // reset the values and let the enter key get pressed enterPressed = false, shiftPressed = false; } } } }); 

 <textarea name="chatbox" maxlength="840" class="chat-box-textarea_2V28W" id="chatbox_main"></textarea>