How to make "Enter" key in a textarea submit a form

I have a chat that uses textarea instead of text for obvious reasons. This is why each time members hit ENTER they get a new line instead of sending the message. I would like to change this, so every time they hit ENTER =the message to be submitted and then the cursor to return on textarea for their next message typing. I've tried different codes found on this site, most didnt work and those who seemed to do something were just refreshing the page and i got a blank page.

My code:

<form name="message" action="">
    <textarea name="usermsg" autocomplete="off" type="text" id="usermsg" rows="4" cols="30" style="width: 450px; margin-left: 25px;">
    </textarea>
    <br/>

    <p style="margin-left: 420px;"><input name="submitmsg" type="submit"  id="submitmsg" value="Send" /></p>
</form>

Thank you very much for your time.

Try this (note that pressing Enter submits, and Shift+Enter adds a new line).

$("#textareaId").keypress(function (e) {
    if(e.which === 13 && !e.shiftKey) {
        e.preventDefault();
    
        $(this).closest("form").submit();
    }
});

Vanilla JavaScript solution

function submitOnEnter(event){
    if(event.which === 13){
        event.target.form.dispatchEvent(new Event("submit", {cancelable: true}));
        event.preventDefault(); // Prevents the addition of a new line in the text field (not needed in a lot of cases)
    }
}

document.getElementById("usermsg").addEventListener("keypress", submitOnEnter);

If you would prefer to not submit if Shift is clicked all you need to do is change line 2 to:

if(event.which === 13 && !event.shiftKey){

To clear the textarea just add this inside the if statement body

event.target.value = "";

To use this with Internet Explorer 11 change line 3 to:

var newEvent = document.createEvent("Event");
newEvent.initEvent("submit", false, true);
event.target.form.dispatchEvent(newEvent);

But wait? Why not use event.target.form.submit();?

When you invoke the submit method of the form the event listeners will not be called.

Demo:

function submitOnEnter(event){
    if(event.which === 13){
        event.target.form.dispatchEvent(new Event("submit", {cancelable: true}));
        event.preventDefault(); // Prevents the addition of a new line in the text field (not needed in a lot of cases)
    }
}

document.getElementById("usermsg").addEventListener("keypress", submitOnEnter);

document.getElementById("form").addEventListener("submit", (event) => {
    event.preventDefault();
    console.log("form submitted");
});

<form id="form">
    <textarea id="usermsg"></textarea>
    <button type="Submit">Submit</button>
</form>

I have created a jsfiddle with an example on how to do it with jQuery and the keypressfunction and which property: http://jsfiddle.net/GcdUE/

Not sure exactly what you are asking for more than this, so please specify your question further if possible.

$(function() {
    $("#usermsg").keypress(function (e) {
        if(e.which == 13) {
            //submit form via ajax, this is not JS but server side scripting so not showing here
            $("#chatbox").append($(this).val() + "<br/>");
            $(this).val("");
            e.preventDefault();
        }
    });
});