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
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. 🙂
You may also have a look on below mentioned blogs –
- jQuery Popup Login and Contact Form
- jQuery Disable Radio Button=
2 Replies to “Prevent Form Submission Using jQuery”
ghffg
We would like to thank youu all over again for the gofgeous ideas you offered Jesse when preparing her own post-graduate research and also,
most importantly, for providing every one off thee ideas within a blog post.
If we had known of your blog a year ago, we’d hhave been rescued from
the nonessental measures we were participating in. Thanks to you.