Last Updated on July 16, 2021 by Roshan Parihar
In this tutorial, learn how to disable the submit button using Bootstrap. The short answer is to use the disabled attribute in the submit button.
When the user enters their details and clicks the submit button, you will get the input data in the database or through email. However, sometimes you do not want to allow the users to click the submit button. In that condition, you can use the methods given below to disable the submit button.
Disable Button Type Submit With Bootstrap
To disable any submit button and other buttons of a form. You have to add the attribute disabled="disabled" to the <button> element to make it disabled. After you disable the button, users may not be able to submit the form.
See the example given below to disable button type submit.
|
1 2 3 4 5 6 7 |
<form method="post"> <div class="form-group"> <label for="Username">Enter Number</label> <input type="text" class="form-control" name="number" placeholder="Enter Number"> </div> <button type="submit" class="btn btn-primary" disabled="disabled">Login</button> </form> |
Output
The above example contains the input text and the button type submit. After you add the attribute disabled, you will get the button that becomes disable to click. You can try to click the above button. But, it is in a disabled state.
How To Disable Input Type Button Using Bootstrap
You can disable the input type submit using the attribute disabled="disabled". You have to just put the attribute in the input type to make it disable.
|
1 2 3 4 5 6 7 |
<form method="post"> <div class="form-group"> <label for="Username">Enter Number</label> <input type="text" class="form-control" name="number" placeholder="Enter Number"> </div> <input type="submit" class="btn btn-primary" disabled="disabled" value="Login"/> </form> |
Output
The above example contains the input text and the input button. Hover over the above button to see what effect you will get after making it disabled.
Create Login Form Bootstrap and Disallow User to Click Button
In addition to the above, you may also want sometimes to disallow a button to click on the login form. This is required when you don’t want all users to fill the login form and click the submit button. You may also like to read how to make the input field required using Bootstrap.
In that case, you have to use the same attribute disabled="disabled" as you have used above.
|
1 2 3 4 5 6 7 8 9 10 11 |
<form method="post"> <div class="form-group"> <label for="Username">Enter Username</label> <input type="text" class="form-control" name="username" placeholder="Enter Username" required="true"> </div> <div class="form-group"> <label for="Password">Enter Password</label> <input type="password" class="form-control" name="password" placeholder="Enter Password" required="true"> </div> <button type="submit" class="btn btn-primary" disabled="disabled">Login</button> </form> |
Output
The above example contains the login form with input for username and password. Fill the above form by entering the username and password. In the end, you can try to click the submit button. However, the button is disabled and you cannot submit the form by clicking the button.
DOWNLOAD Free Bootstrap CHEAT SHEET
You may also like to read
- Decrease/Increase Button Size Using Bootstrap
- Style Button Using Bootstrap CSS Class
- Left Align And Right Align Button Using Bootstrap?
I hope you like this post on how to not allow users to click on the submit button.
Reference
Bootstrap Doc to Learn Classes to Disallow Button Click