Disable button until the page is fully loaded

Chris · Feb 25, 2007

Not sure if this is the right place to post. Can anyone tell me how to
disable a button until the page is fully loaded. Regards, Chris.

J.O. Aho · Feb 25, 2007

Chris said:
Not sure if this is the right place to post. Can anyone tell me how to
disable a button until the page is fully loaded. Regards, Chris.

In theory you could have the button disabled by default, then have a
javascript that enables the button at the end of the page, but it's usually
not the html that takes the time to load but all the images, which makes it
just silly to do that.

Ben C · Feb 25, 2007

Not sure if this is the right place to post. Can anyone tell me how to
disable a button until the page is fully loaded. Regards, Chris.

There is an "onload" event for the DOM document, but don't ask me the
rules determining precisely when it occurs.

Andrew Bailey · Feb 26, 2007

Ben C said:
There is an "onload" event for the DOM document, but don't ask me the
rules determining precisely when it occurs.

Hi,

Try this....

<script>
function activatebutton(){
buttonoff.style.display='none';
buttonon.style.display='inline';
}
</script>

<body onload="activatebutton()">

<div id="buttonoff" style="display: inline">
<img src="../images/buttonimg.gif">
</div>

<div id="buttonon" style="display: none">
<a onclick="dosomething()"><img src="../images/buttonimg.gif"></a>
</div>

</body>

Hope this helps

Andy

Jonathan N. Little · Feb 26, 2007

Andrew said:
Hi,

Try this....

<script>
function activatebutton(){
buttonoff.style.display='none';
buttonon.style.display='inline';
}
</script>

<body onload="activatebutton()">

<div id="buttonoff" style="display: inline">
<img src="../images/buttonimg.gif">
</div>

<div id="buttonon" style="display: none">
<a onclick="dosomething()"><img src="../images/buttonimg.gif"></a>
</div>

</body>

Hope this helps

And if they have JavaScript disabled the function would be better
described as donothing()!

Far better to to use JavaScript as a precheck...have a variable that is
initially set as false, then attach to onload event to reset to true.
Trap the submit of form to check if variable is true or not to allow or
cancel the submit action. But you should *always* do a final check of
all submitted data server-side with receiving script. With this method
if JavaScript is disable the form will still submit, but the server-side
script will catch the missing data error.

liangdong · Jul 31, 2011

Putting code in ready() function to disable button cannot resolve this issue. As the ready() function is only for sure that it will be executed after the DOM is fully loaded, but not for sure that it will be triggered before any content has been rendered to the user. Thus, user may have a chance to click on the button before the page is fully load.

Setting the button disable initially is also risky in case the JavaScript is disabled in the browser, and the button cannot be enabled again.

We may consider that every tag in html page is loaded in sequence. Thus, we can put the script tag to disable button in the every beginning of the page and put the script tag to enable the button again in the end of the page.

Following code is a simple test.

HTML:

<!DOCTYPE html>
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

</head>
<body>
<input id='button' type='button'>
<script type="text/javascript">
$("#button").attr('disabled',true);
$("#button").click(function(){
	alert("hello");
});
</script>
Entering sleep...<br/>
<%
out.flush();
Thread.sleep(3000);
%>
Sleep end.<br/>
<script type="text/javascript">
$("#button").attr('disabled',false);
</script>
</body>
</html>

Make 'Image X' spin 360deg on y-Axis until reset button clicked	1	Jan 22, 2023
Button enabling before all inputs are filled and disabling when all inputs are filled	1	Aug 18, 2022
Disabling/re-enabling a button made from sheets using scripts	3	Nov 9, 2022
<Button ...> display is fine, except for two things	1	Oct 23, 2023
NEED HELP How to refresh animation so the rest of page can load	0	Oct 4, 2021
Disabling button until page loaded	1	Feb 25, 2007
How to make an input box enable for only past dates and for the startdate if it falls in the current month?	5	Jun 12, 2023
Sending data from web page to Raspberry Pi	0	Nov 26, 2022

Disable button until the page is fully loaded

Chris

J.O. Aho

Ben C

Andrew Bailey

Jonathan N. Little

liangdong

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads