Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Disabling Buttons?

Reply
Thread Tools

Disabling Buttons?

 
 
Ralph Freshour
Guest
Posts: n/a
 
      12-17-2003
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...

 
Reply With Quote
 
 
 
 
Grant Wagner
Guest
Posts: n/a
 
      12-17-2003
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 <(E-Mail Removed)>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/...ce/frames.html

* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/a...ence_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-deve...upgrade_2.html


 
Reply With Quote
 
 
 
 
Chris
Guest
Posts: n/a
 
      12-17-2003

"Grant Wagner" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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.su bmit();">
</input>
<form>
</body>

</html>

Regards,
Chris.


 
Reply With Quote
 
@SM
Guest
Posts: n/a
 
      12-17-2003
Chris a ecrit :
>
> "Grant Wagner" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
> > Ralph Freshour wrote:
> >

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


beuark ! that's for IE ! ( and others what do they do ? )
 
Reply With Quote
 
@SM
Guest
Posts: n/a
 
      12-17-2003
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';}
">
 
Reply With Quote
 
Grant Wagner
Guest
Posts: n/a
 
      12-17-2003
Chris wrote:

> "Grant Wagner" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
> > 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.su bmit();">
> </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 <(E-Mail Removed)>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/...ce/frames.html

* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/a...ence_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-deve...upgrade_2.html


 
Reply With Quote
 
Lasse Reichstein Nielsen
Guest
Posts: n/a
 
      12-17-2003
"@SM" <(E-Mail Removed)> writes:

> Chris a ecrit :
>>
>> "Grant Wagner" <(E-Mail Removed)> wrote in message
>> news:(E-Mail Removed)...
>> > Ralph Freshour wrote:
>> >

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

>
> 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 - http://www.velocityreviews.com/forums/(E-Mail Removed)
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
 
Reply With Quote
 
Chris
Guest
Posts: n/a
 
      12-17-2003

"@SM" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> Chris a ecrit :
> >
> > "Grant Wagner" <(E-Mail Removed)> wrote in message
> > news:(E-Mail Removed)...
> > > Ralph Freshour wrote:
> > >

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

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


 
Reply With Quote
 
Ivan Marsh
Guest
Posts: n/a
 
      12-17-2003
On Wed, 17 Dec 2003 22:22:32 +0000, Chris wrote:


> "@SM" <(E-Mail Removed)> wrote in message

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

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

 
Reply With Quote
 
Fabian
Guest
Posts: n/a
 
      12-17-2003
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

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
automatic disabling of wireless connection while connected to wired net: howto? Chu Wireless Networking 2 09-27-2005 12:54 AM
Disabling SSID on Linksys WRT54GS router. Cannot disable ssid pattyjamas@hotmail.com Wireless Networking 6 08-18-2005 02:27 PM
Disabling XP firewall Geoff Wireless Networking 4 04-05-2005 02:16 PM
Disabling wireless acces on a domain =?Utf-8?B?am9obl9iYWdlcg==?= Wireless Networking 1 01-12-2005 11:54 PM
disabling html in messages Juha Pekka Lepparanta Firefox 1 10-27-2003 01:05 AM



Advertisments