Home > Article > Web Front-end > Comparing JavaScript methods: Enable or disable buttons using jQuery vs. Vanilla
Comparing JavaScript methods: Enable or disable buttons using jQuery vs. Vanilla
- PHPzOriginal
- 2023-08-28 17:05:09543browse
In this article, we will discuss how to enable or disable buttons using JavaScript. First, we'll see how it works in plain JavaScript, and later we'll see how to implement it using jQuery.
JavaScript is one of the core technologies of the Internet. It is used by most websites and supported by all modern web browsers without the need for plugins. In this series, we will discuss different tips and tricks that will help you with your daily JavaScript development.
When you use JavaScript, you often need to enable or disable buttons based on certain actions. Typically when you work with forms, you want to keep the submit button disabled until the user fills out all required fields in the form. Once the user fills in all the required fields, you want to enable it automatically so the user can click a button to submit the form.
In HTML, a button element has its own state, so you can keep it enabled or disabled. For example, you can keep a button disabled while the form loads. Later, you can enable it with the help of JavaScript.
Today we will discuss how to enable or disable buttons using JavaScript through a few practical examples.
Use Vanilla JavaScript to enable or disable buttons
In this section, we will discuss a practical example that demonstrates how to enable or disable a button using plain JavaScript.
Let’s take a look at the following example.
<html>
<head>
<script>
function toggleButton()
{
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
if (username && password) {
document.getElementById('submitButton').disabled = false;
} else {
document.getElementById('submitButton').disabled = true;
}
}
</script>
</head>
<body>
<div>
<form action="/submit.php" method="post">
Username:<input type="text" name="username" id="username" onchange="toggleButton()">
Password:<input type="password" name="password" id="password" onchange="toggleButton()">
<input id="submitButton" type="submit" value="Submit" disabled/>
</form>
</div>
</body>
</html>
In the example above, we built a very simple form with a few text fields and a submit button. It's important to note that after the form is loaded, the submit button is disabled. We use the disabled attribute to set the default state of the submit button to disabled.
Next, we define the onchange event on the username and password input fields. So when the user changes the value of these fields, the onchange event is fired, which ultimately calls the toggleButton function. In the toggleButton function we check if the user entered a value in the two required fields. If this is the case, we set the disabled property of the submit button to false, which ultimately enables the submit button so that the user can click it. On the other hand, if the username or password field is empty, we set the disabled property to true, which will disable the submit button so that the user cannot click it.
In the example above, we used an input submit button, but you can also use an HTML button, as shown in the example below.
<button id="submitButton" disabled/>Submit</button>
This is how to enable or disable buttons using plain JavaScript. In the next section, we will see how to use the jQuery library.
Use jQuery to enable or disable buttons
In this section, we will discuss how to toggle the state of a button with the help of jQuery library.
Let's modify the example discussed in the previous section.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script>
function toggleButton()
{
var username = $('#username').val();
var password = $('#password').val();
if (username && password) {
$('#submitButton').attr('disabled', false);
} else {
$('#submitButton').attr('disabled', true);
}
}
</script>
</head>
<body>
<div>
<form action="/submit.php" method="post">
Username:<input type="text" name="username" id="username" onchange="toggleButton()">
Password:<input type="password" name="password" id="password" onchange="toggleButton()">
<input id="submitButton" type="submit" value="Submit" disabled/>
</form>
</div>
</body>
</html>
First, we have loaded the jQuery library so that we can use it in our function. The only difference in the above example is that we use the jQuery object's attr method to change the button's state.
attr methods of the jQuery object are used to set or get the value of a specific attribute of an element. If you use it with only a single parameter, it will be used to get the value of a property. On the other hand, if you use it with two parameters, it is used to set the value of the property. In our case, we use it to set the value of the button's disabled property. Other than that, everything is the same.
If you are using jQuery 1.5, you need to use the prop method instead of the attr method, as shown in the following code snippet.
//...
$('#submitButton').prop('disabled', true);
Alternatively, if you want to remove any attributes of an element, you can also use the jQuery object's removeAttr method, as shown in the following code snippet. The result is the same as setting the disabled property to false.
//...
$('#submitButton').removeAttr('disabled');
These are the different ways you can enable or disable buttons using jQuery.
in conclusion
Today we discussed how to enable or disable buttons in JavaScript with a few practical examples. In addition to plain JavaScript, we also discussed how to achieve it with the help of the jQuery library.
The above is the detailed content of Comparing JavaScript methods: Enable or disable buttons using jQuery vs. Vanilla. For more information, please follow other related articles on the PHP Chinese website!