Without submit button, it is possible to submit a form on pressing enter key, this tutorial demonstrates you to do the same using jQuery.



In our example, we have created a simple HTML form with some fields and applied following  jQuery code in keydown() event on form.


$('#my_form').keydown(function() {
var key = e.which;
if (key == 13) {
// As ASCII code for ENTER key is "13"
$('#my_form').submit(); // Submit form code
}
});

Moreover, we used some validation on form fields. Just click on live demo to see its functionality, follow the codes given below or download it to use.

submit form on pressing enter key

To learn more, our complete HTML and jQuery codes are given below:

HTML file: form.html


<!DOCTYPE html>
<html>
<head>
<title>Submit Form On Enter Key - Demo Preview</title>
<meta content="noindex, nofollow" name="robots">
<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 class="maindiv">
<div class="first">
<div class="title">
<h2>Submit Form On Enter Key</h2>
</div><!-- Form Starts Here -->
<form action="#" id="my_form" method="post" name="my_form">
<h3>Form Title</h3>
<label>Full Name:</label><br>
<input class="text" id="name" type="name"><br><br>
<label>Email Id:</label><br>
<input class="text" id="email" type="email"><br><br>
<label>Message:</label><br>
<textarea class="text" id="message">
</textarea>
</form>
<!-- Form Ends Here -->
<p class="notification"><br><br>
Note: Fill complete form and hit the enter button. As soon as you<br>
hit enter key your form data will be submitted.<br>
</p>
</div>
</div>
</body>
</html>

jQuery File: script.js


$(document).ready(function() {
$('#my_form').keydown(function() {
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
var key = e.which;
if (key == 13) {
if (name == "") {
alert("Name is Missing");
} else if (email == "") {
alert("Email Id is missing");
} else if (message == "") {
alert("Message is missing");
} else {
$('#my_form').submit();
alert("Form Submitted ...!!");
}
return false;
}
});
});

CSS File: style.css


@import "http://fonts.googleapis.com/css?family=Droid+Serif";
/* Above Line is to import Google font style */
.maindiv{
margin:30px auto;
width:980px;
height:500px;
background:#fff;
padding-top:20px;
font-family:'Droid Serif',serif;
font-size:14px
}
textarea{
width:420px;
height:60px;
border-radius:4px;
box-shadow:0 0 1px 2px #123456;
margin-top:10px;
padding:2px 7px
}
input{
width:420px;
height:20px;
border-radius:4px;
box-shadow:0 0 1px 2px #123456;
margin-top:10px;
padding:2px 7px
}
.first{
width:70%;
float:left
}
.title{
width:500px;
height:70px;
text-shadow:2px 2px 2px #cfcfcf;
margin-top:40px;
font-size:16px;
text-align:center
}
form{
border:1px dashed #777;
padding:0 20px 20px;
width:450px
}
h3{
padding-bottom:15px;
text-align:center;
color:#333;
font-size:20px;
text-shadow:2px 2px 2px #cfcfcf
}
.notification{
color:#777
}

Pabbly Form Builder


Conclusion:

So, with pressing enter key it is possible to submit your form. Now use our simple code in your form.

You may also like –