Disabling and enabling features in buttons is one of the most useful features every web application uses in its buttons. It uses JavaScript along with jQuery and depending on a specific condition. In this article, you will learn how to create a button that utilizes this enable and disable feature.
What is enabling and disabling of buttons?
Disabling and enabling the buttons is a crucial ability of a button to provide the functionality as per requirement. When we say the button is disabled, it means the button will appear dim and will not perform its desired functionality. When we say the button is enabled, it means clicking on it will make certain actions or execute the underlying functionality.
Often, when you go online for filling out web forms, you might have noticed how the 'submit' button gets dim until we fill all the required fields. This is where the jQuery scripts run in the background to make the switching between enable and disable feature.
Using jQuery & HTML for enabling and disabling:
jQuery is a small, feature-rich, and fast JavaScript library that is used to give specific mechanisms to a web page. It works with Hyper Text Markup Language (HTML) and allows to provide logics into it by blending JavaScript and jQuery code with it.
Logic behind toggling between enabled and disabled state:
Initially, we have to set the button state to ‘disabled’ mode. If the input text box associated with it is empty, the button will remain disabled making the button dim. But, if the input text box is not empty, the jQuery code will change it to enabled making the button clickable.
Program:
<html>
<head>
<title> Enabling and Disable button </title>
<script type = 'text/javascript' src = 'http://code.jquery.com/jquery.min.js'></script>
<script type = 'text/javascript'>
$(function () {
$('#searchInput').keyup(function () {
if ($(this).val() == '') {
$('.enableOnInput').prop('disabled', true);
}else{
$('.enableOnInput').prop('disabled', false);
}
});
});
</script>
</head>
<body>
<div id = 'frame'>
<div class = 'search'><h2> Enabling & Disabling button Through jQuery </h2>
<form method = 'post'>
<input type='text' name = 'searchQuery' id = 'searchInput' />
<input type = 'submit' name = 'submit' id = 'submitBtn' class ='enableOnInput' disabled = 'disabled' />
</form>
</div>
</div>
</body>
</html>
Explanation:
First, we have initiated the HTML document scripting with the <HTML> tag followed by <HEAD> and <TITLE>. Inside the script tag, we have set a logic attached to the event in our input so that we can go ahead and include some code to achieve the output. The $(function(){ })tell the browser to execute any code that is enclosed in it when the page loads.
We are repeatedly checking whether the search input box is having any data put inside it or not. If input does not have any data, prop('disabled', true), otherwise prop('disabled', false). Next, within the script tag, we have to assign the font family and the background image.
Now, let us create the frame with certain width, margin, margin top, border, box shadow, border radius, background color, and some other properties. Next, we add the properties required for the search input such as height, line-height, padding, and width.
Next, we have to add the properties for the submit button such as height, line-height, width, and text-align; and finally for the frame and frame form. After closing the </head> and starting the <body> tag, place the <div>and <form>to structure your form with search input, button and texts and assign the input button type as ‘submit’.Lastly, close the </form>, </div>, </body>, and </html> and save the script as anyFileName.html
Disabling and Enabling Button with attr and removeAttr HTML Attributes:
Another way to disable and enable buttons in a jQuery program is through HTML’s disabled attribute under the input element. The entire controlling has to be done by the attr() and removeAttr().
Example:
<html>
<head>
<title> Enabling and Disable button </title>
<script type = 'text/javascript' src = 'http://code.jquery.com/jquery.min.js'></script>
<script type = 'text/javascript'>
$(function() {
$(":text").keypress(check_submit).each(function() {
check_submit();
});
});
function check_submit() {
if ($(this).val().length == 0) {
$(":submit").attr("disabled", true);
} else {
$(":submit").removeAttr("disabled");
}
}
</script>
</head>
<body>
<form method = "post" action = "/login">
<input type = "text" id="email" name = "email" size = "40" maxlength="55" placeholder="Email" />
<input type="password" id="password" name="password" size="15" maxlength="20" placeholder="Password"/>
<input type = "submit" disabled>
</form>
</body>
</html>
Enabling and disabling Button using the prop() and HTML attribute:
We can enable and disable the button by enabling or disabling the properties of the button using the prop()
<html>
<head>
<title> Enabling and Disable button </title>
<script type = 'text/javascript' src = 'http://code.jquery.com/jquery.min.js'></script>
<script type = 'text/javascript'>
$(document).ready(function() {
var $submit = $('input[type="submit"]');
$submit.prop('disabled', true);
$('input[type="text"]').on('input change', function() { //'input change keyup paste'
$submit.prop('disabled', !$(this).val().length);
});
});
</script>
</head>
<body>
<form method = "post" action="/login">
<input type = "text" id = "email" name = "email" size="45" maxlength="55" placeholder="Email" />
<input type = "password" id = "password" name = "password" size = "25" maxlength="20" placeholder = "Password"/>
<input type = "submit" disabled>
</form>
</body>
</html>
Conclusion:
The logic and principles used behind enabling and disabling is same to that of checkboxes and radio buttons. This feature will help you in various aspects of feeding input and will also reduce the error of putting invalid or blank data to your database. So, you will see most of the online forms you fill comes with this feature.