Member Avatar for srinivaskota

Hi Experts here,
Pls help.
when I disable the button using the code

document.getElementById("mybutton").disable=true;

it is disabling perfectly but when the page gets refreshed again it comes
to enable position

so, I need a code even when the refreshing the page also my button is in disable position.
Thanks and Regards,
Srinivas yadav.

  • 4 Contributors
  • 4 Replies
  • 2K Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by MattEvans

Dani AI

Generated

The reason the button comes back enabled is that a refresh rebuilds the DOM from scratch. As said, HTTP is stateless, so you need a flag outside the page. Combine that with ’s point about starting in a disabled state to avoid a flash of enabled UI, and you get a reliable flow: render the button disabled, then on load read a persisted flag to decide whether to keep it locked. Also double‑check you are using the standard property/attribute name, which is disabled (not disable), as noted.

Here is a small, drop‑in approach using localStorage. It disables the button when clicked and keeps it disabled across reloads until you clear the flag.

<button id="mybutton">Do Thing</button>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    var btn = document.querySelector('#mybutton');
    var key = 'mybutton.disabled';

    if (window.localStorage && localStorage.getItem(key) === '1') {
      btn.disabled = true;
    }

    btn.addEventListener('click', function () {
      btn.disabled = true;
      if (window.localStorage) localStorage.setItem(key, '1');
      // do your actual action here...
    });

    // To re-enable later (e.g., after success or via an admin reset):
    // localStorage.removeItem(key); btn.disabled = false;
  });
</script>

Older browsers without localStorage? Fall back to a simple cookie: set document.cookie = 'btn_disabled=1; max-age=86400; path=/' when you disable, and on load check document.cookie.indexOf('btn_disabled=1') > -1 to decide whether to keep it locked. For business rules, prefer a server flag (session or DB) and render the button with disabled on the server side; never rely on a client‑side disabled control for security. Also remember: disabled controls are not submitted with forms, so if you need to record the state server‑side, post a hidden field too.

Recommended Answers

All 4 Replies

Member Avatar for srinivaskota

Hi Experts here,
Pls help.
when I disable the button using the code

document.getElementById("mybutton").disable=true;

it is disabling perfectly but when the page gets refreshed again it comes
to enable position

so, I need a code even when the refreshing the page also my button is in disable position.
Thanks and Regards,
Srinivas yadav.

Member Avatar for ~s.o.s~

Use the 'onload' event handler for this task. This way, as soon as the document / body is loaded, the button will be in disabled state.

<html>
<head></head>
<body onload="funcToDisable();">
</body>
</html>

Here the 'functionToDisable()' will contain the action which you need to perform when the document loads.

That all being said, you should realize that the HTTP is a stateless protocol so you can't keep the button enabled on the first try and disabled on all consecutive reloads since there is way of knowing it. Your best bet would be to keep a flag at the server which will keep track whether its the users' first visit or not and act accordingly.

Member Avatar for pedramphp

Hi Experts here,
Pls help.
when I disable the button using the code

document.getElementById("mybutton").disable=true;

it is disabling perfectly but when the page gets refreshed again it comes
to enable position

so, I need a code even when the refreshing the page also my button is in disable position.
Thanks and Regards,
Srinivas yadav.

you have to do like this...
because you have made the input button after the head tag you can not use the script in the head so you have to write the code after the input button , another problem you had you have to use disabled instead of disable
<html>
<head><head>
<body>
<input type="button" name="mybutton" value="mybutton">
<script language="javascruipt>
document.getElementById("mybutton").disabled=true;
</script>
</body>
</html>

best REgards Pedram

Member Avatar for MattEvans

because you have made the input button after the head tag you can not use the script in the head so you have to write the code after the input button , another problem you had you have to use disabled instead of disable

Or use the body onload handler as sos suggested.. It makes for a more manageable project if you use onload to call one onload function that does all one-time-only functions, rather than putting bits of script inbetween html elements..

To srinivaskota, if you have some condition that must be met to enable the button; and the condition is usually not yet met when the page is first accessed ( or refreshed ), i.e. the button should only become enabled as the result of some javascript code; set the button as disabled in the HTML, i.e.

<button disabled="true" >Button Text</button>

Then, when the condition is met, set the element's disabled property to false. You'll still probably need an onload handler to check if the condition is met, if it's some kind of persistant condition.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.