How to make "Enter" key in a textarea submit a form
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 keypress
function 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();
}
});
});
Well, supposing you were using jquery it would be a simple listener on your input field:
In your footer before </body>:
<script type="text/javascript">
$(document).ready(function(){
$('#usermsg').keypress(function(e){
if(e.which == 13){
// submit via ajax or
$('form').submit();
}
});
});
</script>
In your html head add this:
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
but if js or jquery is out of the question then perhaps update your question to specifically exclude it.