.NET Daily

How to keep a button disabled until the page is loaded

Introduction

Carmen

Carmen


LATEST POSTS

Little things that make a big difference in Javascript 24th January, 2016

How to install Sass and Compass on Windows 28th January, 2015

Javascript

How to keep a button disabled until the page is loaded

Posted on .

There are cases when you need to keep a button disabled until the page is rendered. The main reason you may need this is to prevent the user from clicking on a button that is not functional at that point.

The easiest way of achieving this is to follow these 2 steps:

  1. Disable the button from HTML:
  2. Enable the button from JavaScript when the page is loaded:

That’s it!

 

Additional notes

Keep in mind that there might be situations when you’ll need to consider cases like the product is out of stock and the button should remain disabled. Or there is a quantity limit that cannot be exceeded for that product, so the button should be disabled when that limit is reached.

There are many other things that can influence the approach presented above (depending on what your button is doing), and a simple way of dealing with this is to add a class on the button in case some restrictions should be in place.

Then just check in JavaScript if the class is there, and don’t enable the button.

Example:

  1. Do some checks in the backend and set a boolean to determine if the button should remain disabled or not. Example: set a quantity limit.
  2. Disable the button from HTML and add a class if you condition is met (quantity limit was reached):
  3. Enable the button from JavaScript when the page is loaded and if the condition is not broken:
Carmen

Carmen

There are no comments.

View Comments (0) ...
Navigation