Disabling Buttons?

Discussion in 'Javascript' started by Ralph Freshour, Dec 17, 2003.

  1. How can I disable a button once it has been clicked? I want to prevent
    the user from clicking on it twice if they have a slow connection.

    Thanks...
    Ralph Freshour, Dec 17, 2003
    #1
    1. Advertising

  2. Ralph Freshour

    Grant Wagner Guest

    Ralph Freshour wrote:

    > How can I disable a button once it has been clicked? I want to prevent
    > the user from clicking on it twice if they have a slow connection.
    >
    > Thanks...


    <input type="button" value="Please click me" class="button"
    onclick="return singleClick(this, 'Please wait...');" />
    <script type="text/javascript">
    function singleClick(b, s) {

    // move focus off the button
    b.blur();

    // has the button already been clicked?
    if (typeof b.isClicked != "undefined" && b.isClicked) {
    // yes, disallow the action
    return false;
    } else {
    // no, flag that it has been clicked
    b.isClicked = true;

    // should we change the button text?
    if (typeof s != "undefined") {

    // yes, is there support to set the width of a button?
    if (typeof b.style != "undefined" &&
    typeof b.style.width != "undefined" &&
    typeof b.offsetWidth != "undefined") {

    // yes, set the width to the current width
    b.style.width = b.offsetWidth + "px";
    }

    // change the text on the button
    b.value = s;

    // is there support to set the CSS class of a button?
    if (typeof b.className != "undefined") {
    // yes, set the CSS class to "buttonDisabled"
    // (defined in css)
    b.className = "buttonDisabled";
    }
    }

    // allow the action
    return true;
    }
    }
    </script>

    One important point with this code, the "Please wait..." text you pass to
    the button *must* be shorter then the current text. Making it longer would
    significantly complicate the procedure. Alternatively, you could dispose
    of changing the text and the className entirely, since it's all just
    cosmetic.

    --
    | Grant Wagner <>

    * Client-side Javascript and Netscape 4 DOM Reference available at:
    *
    http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/frames.html

    * Internet Explorer DOM Reference available at:
    *
    http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp

    * Netscape 6/7 DOM Reference available at:
    * http://www.mozilla.org/docs/dom/domref/
    * Tips for upgrading JavaScript for Netscape 7 / Mozilla
    * http://www.mozilla.org/docs/web-developer/upgrade_2.html
    Grant Wagner, Dec 17, 2003
    #2
    1. Advertising

  3. Ralph Freshour

    Chris Guest

    "Grant Wagner" <> wrote in message
    news:...
    > Ralph Freshour wrote:
    >
    > > How can I disable a button once it has been clicked? I want to prevent
    > > the user from clicking on it twice if they have a slow connection.
    > >
    > > Thanks...

    >
    > <input type="button" value="Please click me" class="button">
    > ... snip ...


    Or:

    <html>

    <body>
    <form id="MyForm" ACTION="http://example.microsoft.com/sample.asp"
    METHOD="POST">
    <input type="submit" value="Press Me"
    onclick="this.disabled=true;document.all.MyForm.submit();">
    </input>
    <form>
    </body>

    </html>

    Regards,
    Chris.
    Chris, Dec 17, 2003
    #3
  4. Ralph Freshour

    @SM Guest

    Chris a ecrit :
    >
    > "Grant Wagner" <> wrote in message
    > news:...
    > > Ralph Freshour wrote:
    > >

    > onclick="this.disabled=true;document.all.MyForm.submit();">


    beuark ! that's for IE ! ( and others what do they do ? )
    @SM, Dec 17, 2003
    #4
  5. Ralph Freshour

    @SM Guest

    Ralph Freshour a ecrit :
    >
    > How can I disable a button once it has been clicked? I want to prevent
    > the user from clicking on it twice if they have a slow connection.


    What kind of button ?

    a radio or checkbox

    <input type=radio onclick="if(this.checked) this.disabled;">

    a button

    <input type=button value="Go On"
    onclick="if(this.value=='Go On')
    {function1(); function2(); this.value='Disabled';}
    ">
    @SM, Dec 17, 2003
    #5
  6. Ralph Freshour

    Grant Wagner Guest

    Chris wrote:

    > "Grant Wagner" <> wrote in message
    > news:...
    > > Ralph Freshour wrote:
    > >
    > > > How can I disable a button once it has been clicked? I want to prevent
    > > > the user from clicking on it twice if they have a slow connection.
    > > >
    > > > Thanks...

    > >
    > > <input type="button" value="Please click me" class="button">
    > > ... snip ...

    >
    > Or:
    >
    > <html>
    >
    > <body>
    > <form id="MyForm" ACTION="http://example.microsoft.com/sample.asp"
    > METHOD="POST">
    > <input type="submit" value="Press Me"
    > onclick="this.disabled=true;document.all.MyForm.submit();">
    > </input>
    > <form>
    > </body>
    >
    > </html>
    >
    > Regards,
    > Chris.


    It's not properly formed HTML (there is no closing </input> tag and it should
    be </form>, not <form>), but I'll assume those were typos (although I really
    hope you don't write forms with opening and closing <input></input> tag sets).

    As for the JavaScript on the page, well, in Mozilla Firebird (and other Gecko
    based browsers), it generates the following error and fails to prevent a
    second click on the button: Error: document.all has no properties

    In Netscape 4.78 it generates the following error and fails to prevent a
    second click on the button: document.all has no properties

    It also fails to provide any sort of feedback mechanism to the user as to
    *why* the button is no longer working (although that isn't as important as the
    next point) and it will not submit the form at all if client-side JavaScript
    is disabled.

    So, before you unceremoniously ...snip... a working solution and replace it
    with your own, perhaps you should ensure that your solution works as well in
    as many browsers, does as much, and provides the desired functionality even if
    the user chooses to disable client-side JavaScript.

    There is more to JavaScript authoring then having the script work in one, or
    even many, browsers. Part of being a good JavaScript programmer is ensuring
    that whatever you are doing degrades gracefully and provides as much support
    for as many people as possible. Even in an Intranet environment, this should
    be the goal, because although your company runs Internet Explorer today, they
    may not always run it, and having a solution that can be ported to other
    browsers more readily will, ultimately, make your job easier.

    Besides, providing the sort of "solution" you just provided means you've just
    trained another JavaScript author to be sloppy, careless and care little for
    the portion of their audience not using the tools you expect them to be using
    (Internet Explorer with client-side JavaScript enabled).

    My guess is it was getting lonely in the Sloppy, Careless and Care Little Club
    and you wanted some new members.

    --
    | Grant Wagner <>

    * Client-side Javascript and Netscape 4 DOM Reference available at:
    *
    http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/frames.html

    * Internet Explorer DOM Reference available at:
    *
    http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp

    * Netscape 6/7 DOM Reference available at:
    * http://www.mozilla.org/docs/dom/domref/
    * Tips for upgrading JavaScript for Netscape 7 / Mozilla
    * http://www.mozilla.org/docs/web-developer/upgrade_2.html
    Grant Wagner, Dec 17, 2003
    #6
  7. "@SM" <> writes:

    > Chris a ecrit :
    >>
    >> "Grant Wagner" <> wrote in message
    >> news:...
    >> > Ralph Freshour wrote:
    >> >

    >> onclick="this.disabled=true;document.all.MyForm.submit();">

    >
    > beuark ! that's for IE ! ( and others what do they do ? )


    onclick="this.disabled=true;this.form.submit();"

    I'd do that in IE too.
    /L
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
    Lasse Reichstein Nielsen, Dec 17, 2003
    #7
  8. Ralph Freshour

    Chris Guest

    "@SM" <> wrote in message
    news:...
    > Chris a ecrit :
    > >
    > > "Grant Wagner" <> wrote in message
    > > news:...
    > > > Ralph Freshour wrote:
    > > >

    > > onclick="this.disabled=true;document.all.MyForm.submit();">

    >
    > beuark ! that's for IE ! ( and others what do they do ? )


    Stephane,

    I ran a very simple test of this on IE 6.0 and NN7.0 (so I assume Mozilla
    will work as well).
    In what respect do you think this may cause a problem.

    Regards,
    Chris.
    p.s. beuark is spelt burk in English.
    You can also be abusive in French if you wish as I speak that too.
    In fact you can be abusive in Russian if you like.
    I don't speak Russian, but it will make no difference.
    Chris, Dec 17, 2003
    #8
  9. Ralph Freshour

    Ivan Marsh Guest

    On Wed, 17 Dec 2003 22:22:32 +0000, Chris wrote:


    > "@SM" <> wrote in message

    <snip>
    >> > > Ralph Freshour wrote:
    >> > >
    >> > onclick="this.disabled=true;document.all.MyForm.submit();">

    >>
    >> beuark ! that's for IE ! ( and others what do they do ? )

    >
    > Stephane,
    >
    > I ran a very simple test of this on IE 6.0 and NN7.0 (so I assume
    > Mozilla will work as well).
    > In what respect do you think this may cause a problem.


    I was having trouble with the old HTML button double-click on a PHP script
    that does a very large query (in excess of five minutes to process).

    I use the 'onclick="this.disabled=true;..." method for IE and Mozilla and
    it works fine in both.

    --
    i.m.
    The USA Patriot Act is the most unpatriotic act in American history.
    Ivan Marsh, Dec 17, 2003
    #9
  10. Ralph Freshour

    Fabian Guest

    Chris hu kiteb:


    > Regards,
    > Chris.
    > p.s. beuark is spelt burk in English.


    I love Skitt's Law.

    Berk.

    --
    --
    Fabian
    Visit my website often and for long periods!
    http://www.lajzar.co.uk
    Fabian, Dec 17, 2003
    #10
  11. Ralph Freshour

    GIMME Guest

    You are better off having a hidden variable with the value of a timestamp.

    Then look in the database and see if you've already created a record
    for the transaction.

    Ralph Freshour <> wrote in message news:<>...
    > How can I disable a button once it has been clicked? I want to prevent
    > the user from clicking on it twice if they have a slow connection.
    >
    > Thanks...
    GIMME, Dec 17, 2003
    #11
  12. Ralph Freshour

    Chris Guest

    "Grant Wagner" <> wrote in message
    news:...
    > Chris wrote:
    >
    > > "Grant Wagner" <> wrote

    .... snip ...

    Hi Grant,

    I was not intending to replace your posting, which was already available to
    the questioner.
    He asked how to disable a button and I noticed you had failed to mention the
    'disabled' property of the submit button.
    I see you noticed a couple of typos in the HTML I put in as a working
    example.
    I'm sure these corrections will be useful to the questioner should he decide
    to make use of the suggestions I offered ;-)

    Regards,
    Chris.
    Chris, Dec 17, 2003
    #12
  13. Chris wrote on 17 Dec 2003 at Wed, 17 Dec 2003 22:22:32 GMT:

    > "@SM" <> wrote in message
    > news:...
    >> Chris a ecrit :
    >> >
    >> > "Grant Wagner" <> wrote in message
    >> > news:...
    >> > > Ralph Freshour wrote:
    >> > >
    >> > onclick="this.disabled=true;document.all.MyForm.submit();"

    >>
    >> beuark ! that's for IE ! ( and others what do they do ? )

    >
    > In what respect do you think this may cause a problem.


    The collection, document.all, is a proprietary Microsoft feature.
    Not all browsers support it. For those that don't, all that code
    above will do is prevent the user from *ever* submitting the form
    unless they discover that they can disable JavaScript.

    Mike

    --
    Michael Winter
    d (replace ".invalid" with ".uk")
    Michael Winter, Dec 17, 2003
    #13
  14. "Chris" <> writes:

    >> > onclick="this.disabled=true;document.all.MyForm.submit();">


    > I ran a very simple test of this on IE 6.0 and NN7.0 (so I assume Mozilla
    > will work as well).
    > In what respect do you think this may cause a problem.


    In that "document.all" is undefined in Mozilla/Netscape. That means
    that the above gives rise to a Javascript error.

    It might work anyway, but that is just because the form's normal
    behavior takes over (you clicked the submit button, so the form
    is submitted).

    I would say that it's living on the edge to disable the submit button
    between it being clicked and the form being submitted. It works, but
    it could just as well have not worked. I would not depend on it.

    /L
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
    Lasse Reichstein Nielsen, Dec 17, 2003
    #14
  15. Ralph Freshour

    @SM Guest

    Chris a ecrit :
    >
    > "@SM" <> wrote in message
    > news:...
    > > Chris a ecrit :
    > > >
    > > > onclick="this.disabled=true;document.all.MyForm.submit();">

    > >
    > > beuark ! that's for IE ! ( and others what do they do ? )


    onclick="this.disabled=true; this.submit();"
    onclick="this.disabled=true; document.forms['MyForm'].submit();"
    onclick="this.disabled=true; document.forms[0].submit();"


    > Stephane,
    >
    > I ran a very simple test of this on IE 6.0 and NN7.0 (so I assume Mozilla
    > will work as well).


    *document.all* is IE language

    it is possible some others browsers could speak fiew IE idioms

    to be sure, it's preferable to use universal language (Ecma ?)

    > In what respect do you think this may cause a problem.


    *document.all* will give an error on my favorite browser for instance

    > Regards,
    > Chris.
    > p.s. beuark is spelt burk in English.


    perhaps
    but I did mean that I said (in french) beeeeeaaarrrrrck
    It doesn't appear to me that burk (in english) would sound the same.
    Could you spel this sound in english to me ?

    > You can also be abusive in French if you wish as I speak that too.

    So could you give me a translation (this above sentance)?
    My english is not too goog.
    > In fact you can be abusive in Russian if you like.
    > I don't speak Russian, but it will make no difference.


    Regards
    Stéphane
    @SM, Dec 18, 2003
    #15
  16. JRS: In article <brqkv8$fgq$>, seen in
    news:comp.lang.javascript, Chris <> posted at
    Wed, 17 Dec 2003 22:22:32 :-
    >
    >"@SM" <> wrote in message
    >news:...


    >> beuark ! that's for IE ! ( and others what do they do ? )


    >p.s. beuark is spelt burk in English.


    The OP evidently intended to represent a vulgar noise, descriptive of
    the code shown by Ralph, and not a real English word.

    But please do not make spelling corrections in a language that you
    yourself cannot spell properly.

    The proper English spellings are berk and burke, and not burk; the
    former is a simple insult of vulgar derivation, and the second means,
    roughly, cheat, being derived from a proper name.


    Page js-date5.htm has lost its final "eval".

    --
    © John Stockton, Surrey, UK. ???@merlyn.demon.co.uk Turnpike v4.00 MIME. ©
    Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
    Check boilerplate spelling -- error is a public sign of incompetence.
    Never fully trust an article from a poster who gives no full real name.
    Dr John Stockton, Dec 18, 2003
    #16
  17. Ralph Freshour

    Jim Ley Guest

    On Thu, 18 Dec 2003 01:38:37 +0100, "@SM"
    <> wrote:

    >Chris a ecrit :
    >>
    >> "@SM" <> wrote in message
    >> news:...
    >> > Chris a ecrit :
    >> > >
    >> > > onclick="this.disabled=true;document.all.MyForm.submit();">
    >> >
    >> > beuark ! that's for IE ! ( and others what do they do ? )

    >
    > onclick="this.disabled=true; this.submit();"
    > onclick="this.disabled=true; document.forms['MyForm'].submit();"
    > onclick="this.disabled=true; document.forms[0].submit();"


    No reason to call submit at all, in fact it may be bad unless you also
    cancel the default behaviour of the submit button, when you click a
    submit button the form is going to be submitted unless you cancel the
    event.

    Also the this.disabled approach may result in your input submit
    elements name/value pair not being sent with the submission.

    this.disabled=true is all you need surely?

    > to be sure, it's preferable to use universal language (Ecma ?)


    Generally it's preferable to use what works in the widest possible
    situations with the lowest possible risk it shouldn't matter who
    convened the meeting that chose it, but yeah all your solutions were
    better than the simple .all solution suggested.

    Jim.
    --
    comp.lang.javascript FAQ - http://jibbering.com/faq/
    Jim Ley, Dec 20, 2003
    #17
    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. Lamine Darbouche
    Replies:
    1
    Views:
    475
    Johannes Hammersen
    Jun 29, 2005
  2. Michael Groeger
    Replies:
    2
    Views:
    498
    Michael Groeger
    Jan 20, 2006
  3. leggolas
    Replies:
    3
    Views:
    28,050
    leggolas
    Mar 22, 2005
  4. hplayer03

    Disabling buttons in ASP.net 1.1

    hplayer03, Jul 27, 2007, in forum: ASP .Net
    Replies:
    3
    Views:
    421
    hplayer03
    Jul 27, 2007
  5. Ravi Gudlavalleti

    disabling buttons while in edit mode

    Ravi Gudlavalleti, Jun 14, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    1
    Views:
    150
    Rick Spiewak
    Jun 22, 2004
Loading...

Share This Page