How To Disable Button In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Anjali
In this tutorial we will show you the solution of how to disable button in JavaScript, in previous tutorial, we understand about disabling and enabling of a button in JavaScript.
Now, in this tutorial we will understand how to disable a button. Let us understand this article with example also.
As, there are many ways with the help of which we are able to disable a button using JavaScript.
Step By Step Guide On How To Disable Button In JavaScript :-
Here, below the code is given with help of which we will understand this concept. Let us see the code first and then understand it step by step.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>home page</title>
</head>
<body style="text-align:center;margin:0;">
<h1 style="color: red;">
Let us understand how to disable a button with help of JavaScript
</h1>
<!-- create a button, assigning id to button and apply function also. -->
<button id="Btn" onclick="btnfnc()">
Submit
</button>
<br><br>
<p id="demo"></p>
<script>
function btnfnc() {
document.getElementById("Btn")
.disabled = "true";
document.getElementById("demo")
.innerHTML = "Button is Disabled";
}
</script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Here, then we create a body tag. All the content which we want to show on browser’s screen or display is always written inside this codes.
- Here, we want to first say that the code is too easy, let us understand this. Here, first of all we create a heading there and then create a button the value of button is submit.
- Its id is Btn and on click a function runs that’s name is btnfnc. You can see comment given in code for better understanding.
- Then we create a paragraph with id demo. We will use it later in script. Let us understand script.
- Script is a paired tag, and we use or write our JavaScript code inside this pair of tags.
- After this we create a function which we want to call on button click. And inside this we disable a button with .disable = true property. If you want to enable button then give value false there. After this we use script in our paragraph with id demo. And assign some text to it.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last in conclusion, here we can say that with the help of this article we are able to understand how to disable a button using JavaScript.
I hope this tutorial on how to disable button in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
