Form data is submitted to server by clicking on Submit button, sometimes user clicks it more than once, which results in multiple form submission to server. To avoid such anomaly, one of the best solution is to disable the submit button through jQuery.
We are covering below two conditions in this tutorial to disable submit button:
- On page load, Let submit button be disabled by default, when user fills out form completely, it becomes enable.
// To Disable Submit Button By Default
$("input[type=submit]").attr('disabled','disabled');
// When User Fills Out Form Completely
$("form").keyup(function(){
$("input[type=submit]").removeAttr('disabled');
});
- Also, disable submit button on its first click.
$("input[type=submit]").click(function(){
$("input[type=submit]").attr('disabled','disabled');
});
Watch our live demo or download our codes to use it.
HTML File: submit_disable.html
Given below our complete HTML code.
<!DOCTYPE html>
<html>
<head>
<title>Enable Disable Submit Button Using jQuery</title>
<link href="submit_disable.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="submit_disable.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="main">
<h2>Enable Disable Submit Button Using jQuery</h2>
<form action="" method="get">
<label>Name :</label>
<input id="name" name="name" placeholder="Ex: Albert" type="text" value="">
<label>Email :</label>
<input id="email" name="email" placeholder="Ex: [email protected]" type="text" value="">
<label>Message :</label>
<textarea id="message" placeholder="Ex: Hi! Wassup"></textarea>
<input id="submit" type="submit" value="Submit">
</form>
</div>
<p><b>Note:</b> By default we have Disabled Submit Button,<br>
Please fill complete form with approprite values to enable it.</p>
</div>
</body>
</html>
jQuery File: submit_disable.js
Given below our complete jQuery code.
$(document).ready(function() {
$("#submit").attr('disabled', 'disabled');
$("form").keyup(function() {
// To Disable Submit Button
$("#submit").attr('disabled', 'disabled');
// Validating Fields
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
var filter = /^[w-.+]+@[a-zA-Z0-9.-]+.[a-zA-z0-9]{2,4}$/;
if (!(name == "" || email == "" || message == "")) {
if (filter.test(email)) {
// To Enable Submit Button
$("#submit").removeAttr('disabled');
$("#submit").css({
"cursor": "pointer",
"box-shadow": "1px 0px 6px #333"
});
}
}
});
// On Click Of Submit Button
$("#submit").click(function() {
$("#submit").css({
"cursor": "default",
"box-shadow": "none"
});
alert("Form Submitted Successfully..!!");
});
});
CSS File: submit_disable.css
Styling HTML elements.
@import "http://fonts.googleapis.com/css?family=Droid+Serif";
/* Above line is used for online google font */
div.container {
width:960px;
height:600px;
margin:50px auto;
font-family:'Droid Serif',serif
}
div.main {
width:360px;
float:left;
padding:30px 40px;
box-shadow:0 0 10px;
border-radius:2px;
margin-top:7px;
color:#333
}
h2 {
text-align:center;
font-size:20px;
margin-bottom:40px
}
label {
font-weight:700
}
input[type=submit] {
font-size:15px;
border:4px solid #efebeb;
padding:5px;
font-weight:700;
width:95%;
border-radius:3px;
margin-left:6px;
font-family:'Droid Serif',serif;
height:40px
}
input[type=text] {
padding:3px;
border-radius:3px;
margin-left:6px;
border:4px solid #d0cdd1;
width:95%;
height:40px;
margin-bottom:20px;
margin-top:10px
}
form {
font-size:15px;
margin-top:30px
}
textarea {
border:4px solid #d0cdd1;
padding:3px;
width:95%;
border-radius:3px;
resize:none;
height:90px;
margin-left:6px;
margin-top:10px;
margin-bottom:20px
}
p {
clear:both;
padding-top:20px
}
Conclusion:
Above tutorial shows the importance of disabling submit button. Hope you like it, keep reading our other blogs.
One Reply to “Enable Disable Submit Button using jQuery”
Is `.attr(‘disabled’,’disabled’);` a default format?