How To Disable A Button In JavaScript Based On Condition
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Riya
In this tutorial we will show you the solution of how to disable a button in JavaScript based on condition, one of the few components in HTML that has its own state is the button. Almost all of the form controls are included.
The ability to disable and enable the button programmatically using JavaScript is a common requirement. For example, you might wish to enable the button only when a text input element is filled.
Or when a certain checkbox is selected, such as the one that says "I read the terms and conditions," which no one reads. This is how you do it. Continue reading to learn more.
Step By Step Guide On How To Disable A Button In JavaScript Based On Condition :-
In JavaScript, set the button to disable attribute to true to disable it and false to enable it. For that and the if-else conditions statement, you must utilise id.
See how the disabled property on the text input alters the Boolean value.
<html>
<head>
<title></title>
</head>
<body>
<button id="mainButton">Click me</button>
<script>
const button = document.getElementById('mainButton')
if (button.innerText === 'Click me') {
button.disabled = true
}
</script>
</body>
</html>
- To begin, type <! DOCTYPE html> to indicate that the file is in HTML format to the web browser.
- The < html> element, on the other hand, is used to indicate that HTML content is about to begin.
- The <head> tag now contains the information about web pages. The < title> element is used in this tag to provide a web page title. For example, the <head> and < title> tags are paired tags. As a result, both have the < /head> and </title> closing tags.
- Finally, the <body> element specifies the content of the web page. This is where all of the website's material will be written. We've inserted the script tag inside the body tag to incorporate our javascript code.
- The first step is to add an id property to a button in your HTML.
- Selecting the button you wish to alter is the first step in your code. You can do it with the querySelector function, but we'll use the native getElementById function because it's more straightforward. You can use it to target an HTML element based on its id property.
- You can utilise the disabled attribute on all HTML buttons to disable or enable them.
- The disabled property of a button is set to false by default. It signifies that a button is active by default.
- If you wish to use JavaScript to disable a button, set this value to true after you've built and selected the button.
- Now that we have disabled a button, you may use the true value to false to reactivate it.
- Finnaly we close the <body> and < html> with < /body> and </html>, respectively.
Conclusion :-
The button element is frequently used to submit form input to the server. It is standard practice to execute client-side validation first and then display any errors on the screen.
Meanwhile, you can disable the submitting button by following the steps above. I hope this tutorial on how to disable a button in JavaScript based on condition helps you.
About Riya
