In this tutorial I am going to show, how you can prevent form submission using jQuery. Now from Form Submission we know, that the user information flow from client level to server level as soon as we click submit button after which the information is further processed. Now sometimes situation arises when user wants to perform certain activities before form submission.

From this tutorial you will learn how to prevent a submit button from submitting a form using jQuery. In my example I’ve stopped form submission functionality through jQuery preventDefault() method.


Watch the live demo or download code from the link given below

Prevent Form Submission using jQuery 


HTML File:  preventbutton.html

This page describes  3 input text fields and a submit button.


<!DOCTYPE html>
<html>
<head>
<title>Prevent Form Submission Using jQuery</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="css/style.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/prevent.js"></script>
</head>
<body>
<div class="container">
<div class="row">
</div>
<div class="row">
<div class="col-md-12">
<div class="main">
<h1>Prevent Form Submission using jQuery</h1>
</div>
</div>
<div class="col-md-12">
<div id="content">
<div class="login">
<h2>Enter Details</h2><hr/>
<form action="#" method="post">
<label><h3>Name:</h3></label>
<input class="text" id="name" name="name" type="text">
<label><h3>Email:</h3></label>
<input class="text" id="email" name="email" type="email">
<label><h3>Message:</h3></label>
<textarea class="msg" id="msg"></textarea><br/><br/>
<input id="send" type="submit" value="Submit">
<span id="submitdata"></span>
</form>
</div>
<p id="note"><b>Note:</b> Here I've stopped form submission by using <b><i>event.preventDefault()</i></b> method that prevents form to submit.</p>
</div>
</div>
</div>
</div>
</body>
</html>

jQuery File:   prevent.js

Here is our jQuery code for for preventing form submission. preventDefault() method used here stops the default action of submit button from submitting the form.


$(document).ready(function() {
$("#send").click(function(e) {
e.preventDefault();
var name = $("#name").val();
var email = $("#email").val();
var msg = $("#msg").val();
if (!(name == '' || email == '' || msg == '')) {
$("#submitdata").empty();
$("#submitdata").append("Name: " + name + "<br/>Email: " + email + "<br/>Message: " + msg);
} else {
alert("Please Fill All Fields.");
}
});
});

CSS File:  style.css

For Styling HTML elements.

@import url(http://fonts.googleapis.com/css?family=Raleway);

h3 {
text-align:left;
}

div.main{
margin:50px auto;
font-family:raleway;
}
div.main h1{
text-align:center;
align:center;
word-spacing:5px;
}
div.login{
width:50%;
margin:0 auto;
border-radius: 10px;
font-family:raleway;
border: 2px solid #ccc;
padding: 10px 40px 25px;
}
hr{
border:0;
border-bottom:1px solid #ccc;
margin: 10px -40px;
margin-bottom: 30px;
}
h2{
background-color: #FEFFED;
text-align:center;
border-radius: 10px 10px 0 0;
margin: -10px -40px;
padding: 15px;
}
a{
text-decoration:none;
color: cornflowerblue;
}

i{
color: cornflowerblue;
}
#content{
alignment-adjust: central;
margin:0 auto;
text-align: left;
}
#note{
clear: left;
padding-top: 20px;
margin-left: 8px;
font-size: 18px;
text-align: center;
width:100%;
}
input[type=text],input[type=password],input[type=email]{
width:99.5%;
padding: 10px;
margin-top: 8px;
border: 1px solid #ccc;
padding-left: 5px;
font-size: 16px;
font-family:raleway;
}
input[type=submit]{
width: 100%;
background-color:#FFBC00;
color: white;
border: 2px solid #FFCB00;
padding: 10px;
font-size:20px;
cursor:pointer;
border-radius: 5px;
margin-bottom: 15px;
}
.msg{
width:99.5%;
padding: 10px;
margin-top: 8px;
border: 1px solid #ccc;
padding-left: 5px;
font-size: 16px;
font-family:raleway;
}
p {
text-align:justify;
clear:both;
width:432px
}
span {
color:red
}

Conclusion:

So now you know how form submission can be prevented using jQuery. Hope you like the tutorial, Keep reading our other blog posts. 🙂