In this blog post we have illustrated about text submission from textarea on pressing enter key using jQuery, which you can also implement in other form fields too.

 


To submit text from the message box first of all we have applied validations in it

if (message == "")
{
alert("Enter Some Text In Textarea");
 }

 

and as soon as enter key is pressed, text from textarea will be submitted.

$('#my_form').submit();
 alert("Successfully submitted:- " + message);

 


Watch our Live Demo given below or download it to implement in your forms.


HTML file: index.html

<!DOCTYPE html>
<html>
<head>
<title>Submit Data On Enter Key - Demo Preview</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="script.js"></script>
</head>
<body>
<div id="maindiv">
<div id="first">
<div id="title">
<h2>Submit Data Of Textarea On Enter Key</h2>
</div>
<!-- Form Starts Here -->
<form action="#" id="my_form" method="post" name="my_form">
<label>Type Message:</label><br>
<textarea id="text" placeholder="Your Message...">
</textarea>
</form>
<!-- Form Ends Here -->
<p class="notification"><br><br>
Note: Write some text on textarea and hit the enter button. As soon as<br>
you hit enter key your data will be submitted.<br></p>
</div>
</div>
</body>
</html>

 

jQuery File: script.js


$(document).ready(function() {
$('#text').keydown(function() {
var message = $("textarea").val();
if (event.keyCode == 13) {
if (message == "") {
alert("Enter Some Text In Textarea");
} else {
$('#my_form').submit();
alert("Succesfully submitted:- " + message);
}
$("textarea").val('');
return false;
}
});
});

 

CSS File: style.css


@import "http://fonts.googleapis.com/css?family=Droid+Serif";
/* Above line is to import Google Font Style */
div#maindiv{
margin:30px auto;
width:980px;
height:500px;
background:#Fff;
padding-top:20px;
font-family:'Droid Serif',serif;
font-size:14px
}
#text{
width:420px;
height:60px;
border-radius:4px;
box-shadow:0 0 2px 2px #123456;
margin-top:10px;
clear:both
}
#first{
width:65%;
float:left
}
#title{
width:500px;
height:70px;
text-shadow:2px 2px 2px #cfcfcf;
margin-top:40px;
font-size:16px
}
.notification{
color:#777
}

 

Conclusion:

So, pressing enter key it is possible to submit your form data with applied validations in it , to check whether field is not left blank before submitting. Now you can use our simple code in your form to experience it & keep reading our blogs for getting more coding tricks.

Get more related stuff here –