Disable button until the page is fully loaded

Discussion in 'HTML' started by Chris, Feb 25, 2007.

  1. Chris

    Chris Guest

    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.
     
    Chris, Feb 25, 2007
    #1
    1. Advertising

  2. Chris

    J.O. Aho Guest

    Chris wrote:
    > 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.

    --

    //Aho
     
    J.O. Aho, Feb 25, 2007
    #2
    1. Advertising

  3. Chris

    Ben C Guest

    On 2007-02-25, Chris <> wrote:
    > 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.
     
    Ben C, Feb 25, 2007
    #3
  4. "Ben C" <> wrote in message
    news:...
    > On 2007-02-25, Chris <> wrote:
    >> 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.


    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
     
    Andrew Bailey, Feb 26, 2007
    #4
  5. Andrew Bailey wrote:
    > "Ben C" <> wrote in message
    > news:...
    >> On 2007-02-25, Chris <> wrote:
    >>> 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.

    >
    > 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.





    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Feb 26, 2007
    #5
  6. Chris

    liangdong

    Joined:
    Jul 31, 2011
    Messages:
    1
    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>
     
    liangdong, Jul 31, 2011
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Fenno
    Replies:
    0
    Views:
    517
    Fenno
    Nov 6, 2005
  2. Cookie Jar
    Replies:
    1
    Views:
    356
    Cookie Jar
    Aug 25, 2006
  3. ChrisN
    Replies:
    3
    Views:
    493
    Steve C. Orr [MCSD, MVP, CSM, ASP Insider]
    Apr 4, 2007
  4. Chuck
    Replies:
    0
    Views:
    270
    Chuck
    Nov 10, 2003
  5. sonic_soul
    Replies:
    5
    Views:
    128
    Fred Oz
    Nov 7, 2004
Loading...

Share This Page