Change text color on a submit button when clicked?

**kaeli** · Jul 23 '05, 12:11 PM

Re: Change text color on a submit button when clicked?

In article <OzfJc.43699$Fy .27948@twister. socal.rr.com>,
DELETEnewsgroup CAPSaccount@yah oo.com enlightened us with...[color=blue]
> I'm trying to set a submit button to change text and color when clicked.
> Like saying "please wait" instead of "submit" and then changing the
> background color and text color. All works, except for changing the text
> color.
>
> I can set style.backgroun d='red' to change the background color to red.
> But if I say style.color='gr een' to change the text color, it does not
> change. How do you change the text color on a button when it is clicked?
>
>
>[/color]

Funny, it worked fine for me in IE6 and NN7.2.
What browser are you trying to get it to work in? It won't work in all
browsers, though it should work in all that support the element.style
property AFAIK.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title> New Document </title>
<script type="text/javascript" language="javas cript">
function changeBtn(btn)
{
if (! btn.style)
{
alert("Sorry, your browser doesn't support this operation.");
return;
}
btn.style.backg round = "red";
btn.style.color = "blue";
return;
}
</script>
</head>

<body>
<form id="f1" name="f1" action="" method="">
<br>
<input type="button" value="Try me" onClick="change Btn(this)">
</form>
</body>
</html>

--
--
~kaeli~
Humpty Dumpty was pushed!

http://www.ipwebdesign.net/wildAtHeart

http://www.ipwebdesign.net/kaelisSpace

**AFN** · Jul 23 '05, 12:11 PM

Re: Change text color on a submit button when clicked?

IE6

Here's the code:

<input type="submit" name="btnSubmit " value="Next" id="btnSubmit"
onclick="this.v alue = 'Please wait...';this.d isabled =
true;this.style .color='Green'; this.style.back ground='Red'"
style="color:Wh ite;background-color:#336699;f ont-weight:bold;wid th:150px;"
/>

"kaeli" <tiny_one@NOSPA M.comcast.net> wrote in message
news:MPG.1b5f44 f26df9d756989f9 0@nntp.lucent.c om...[color=blue]
> In article <OzfJc.43699$Fy .27948@twister. socal.rr.com>,
> DELETEnewsgroup CAPSaccount@yah oo.com enlightened us with...[color=green]
> > I'm trying to set a submit button to change text and color when clicked.
> > Like saying "please wait" instead of "submit" and then changing the
> > background color and text color. All works, except for changing the[/color][/color]
text[color=blue][color=green]
> > color.
> >
> > I can set style.backgroun d='red' to change the background color to red.
> > But if I say style.color='gr een' to change the text color, it does not
> > change. How do you change the text color on a button when it is[/color][/color]
clicked?[color=blue][color=green]
> >
> >
> >[/color]
>
> Funny, it worked fine for me in IE6 and NN7.2.
> What browser are you trying to get it to work in? It won't work in all
> browsers, though it should work in all that support the element.style
> property AFAIK.
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
> "http://www.w3.org/TR/REC-html40/loose.dtd">
> <html>
> <head>
> <title> New Document </title>
> <script type="text/javascript" language="javas cript">
> function changeBtn(btn)
> {
> if (! btn.style)
> {
> alert("Sorry, your browser doesn't support this operation.");
> return;
> }
> btn.style.backg round = "red";
> btn.style.color = "blue";
> return;
> }
> </script>
> </head>
>
> <body>
> <form id="f1" name="f1" action="" method="">
> <br>
> <input type="button" value="Try me" onClick="change Btn(this)">
> </form>
> </body>
> </html>
>
> --
> --
> ~kaeli~
> Humpty Dumpty was pushed!
> http://www.ipwebdesign.net/wildAtHeart
> http://www.ipwebdesign.net/kaelisSpace
>[/color]

**kaeli** · Jul 23 '05, 12:12 PM

Re: Change text color on a submit button when clicked?

In article <G4gJc.43705$Fy .1214@twister.s ocal.rr.com>,
DELETEnewsgroup CAPSaccount@yah oo.com enlightened us with...[color=blue]
> IE6
>
> Here's the code:
>
> <input type="submit" name="btnSubmit " value="Next" id="btnSubmit"
> onclick="this.v alue = 'Please wait...';this.d isabled =
> true;this.style .color='Green'; this.style.back ground='Red'"
> style="color:Wh ite;background-color:#336699;f ont-weight:bold;wid th:150px;"
> />
>
>[/color]

It's because you're disabling it.
It worked fine without that disabling bit in there.

It's an IE thing. Worked fine in NN7 either way. So, I'd say in IE you
can't override the font color of a disabled element.

--
--
~kaeli~
Those who jump off a bridge in Paris... are in Seine.

http://www.ipwebdesign.net/wildAtHeart

http://www.ipwebdesign.net/kaelisSpace

**Grant Wagner** · Jul 23 '05, 12:12 PM

Re: Change text color on a submit button when clicked?

In Internet Explorer, once you set disabled = true on a button, you have no
control over the text color. IE "greys" the text out (Opera 7.52 appears to do
this as well).

Your code works in Gecko-based browsers: Netscape 7, Firefox, Mozilla, Camino,
etc.

AFN wrote:
[color=blue]
> IE6
>
> Here's the code:
>
> <input type="submit" name="btnSubmit " value="Next" id="btnSubmit"
> onclick="this.v alue = 'Please wait...';this.d isabled =
> true;this.style .color='Green'; this.style.back ground='Red'"
> style="color:Wh ite;background-color:#336699;f ont-weight:bold;wid th:150px;"
> />
>
> "kaeli" <tiny_one@NOSPA M.comcast.net> wrote in message
> news:MPG.1b5f44 f26df9d756989f9 0@nntp.lucent.c om...[color=green]
> > In article <OzfJc.43699$Fy .27948@twister. socal.rr.com>,
> > DELETEnewsgroup CAPSaccount@yah oo.com enlightened us with...[color=darkred]
> > > I'm trying to set a submit button to change text and color when clicked.
> > > Like saying "please wait" instead of "submit" and then changing the
> > > background color and text color. All works, except for changing the[/color][/color]
> text[color=green][color=darkred]
> > > color.
> > >
> > > I can set style.backgroun d='red' to change the background color to red.
> > > But if I say style.color='gr een' to change the text color, it does not
> > > change. How do you change the text color on a button when it is[/color][/color]
> clicked?[color=green][color=darkred]
> > >[/color]
> >
> > Funny, it worked fine for me in IE6 and NN7.2.
> > What browser are you trying to get it to work in? It won't work in all
> > browsers, though it should work in all that support the element.style
> > property AFAIK.
> >
> > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
> > "http://www.w3.org/TR/REC-html40/loose.dtd">
> > <html>
> > <head>
> > <title> New Document </title>
> > <script type="text/javascript" language="javas cript">
> > function changeBtn(btn)
> > {
> > if (! btn.style)
> > {
> > alert("Sorry, your browser doesn't support this operation.");
> > return;
> > }
> > btn.style.backg round = "red";
> > btn.style.color = "blue";
> > return;
> > }
> > </script>
> > </head>
> >
> > <body>
> > <form id="f1" name="f1" action="" method="">
> > <br>
> > <input type="button" value="Try me" onClick="change Btn(this)">
> > </form>
> > </body>
> > </html>[/color][/color]

--
Grant Wagner <gwagner@agrico reunited.com>
comp.lang.javas cript FAQ - http://jibbering.com/faq

**AFN** · Jul 23 '05, 12:12 PM

Re: Change text color on a submit button when clicked?

Hi. Thanks to you and Kaeli for good information. I would not have
guessed about this disabled thing. And old posts didn't turn up this
either. Hopefully someone will find this thread in the future when they're
stuck!

"Grant Wagner" <gwagner@agrico reunited.com> wrote in message
news:40F5A3CE.6 C4960FD@agricor eunited.com...[color=blue]
> In Internet Explorer, once you set disabled = true on a button, you have[/color]
no[color=blue]
> control over the text color. IE "greys" the text out (Opera 7.52 appears[/color]
to do[color=blue]
> this as well).
>
> Your code works in Gecko-based browsers: Netscape 7, Firefox, Mozilla,[/color]
Camino,[color=blue]
> etc.
>
> AFN wrote:
>[color=green]
> > IE6
> >
> > Here's the code:
> >
> > <input type="submit" name="btnSubmit " value="Next" id="btnSubmit"
> > onclick="this.v alue = 'Please wait...';this.d isabled =
> > true;this.style .color='Green'; this.style.back ground='Red'"
> >[/color][/color]
style="color:Wh ite;background-color:#336699;f ont-weight:bold;wid th:150px;"[color=blue][color=green]
> > />
> >
> > "kaeli" <tiny_one@NOSPA M.comcast.net> wrote in message
> > news:MPG.1b5f44 f26df9d756989f9 0@nntp.lucent.c om...[color=darkred]
> > > In article <OzfJc.43699$Fy .27948@twister. socal.rr.com>,
> > > DELETEnewsgroup CAPSaccount@yah oo.com enlightened us with...
> > > > I'm trying to set a submit button to change text and color when[/color][/color][/color]
clicked.[color=blue][color=green][color=darkred]
> > > > Like saying "please wait" instead of "submit" and then changing the
> > > > background color and text color. All works, except for changing[/color][/color][/color]
the[color=blue][color=green]
> > text[color=darkred]
> > > > color.
> > > >
> > > > I can set style.backgroun d='red' to change the background color to[/color][/color][/color]
red.[color=blue][color=green][color=darkred]
> > > > But if I say style.color='gr een' to change the text color, it does[/color][/color][/color]
not[color=blue][color=green][color=darkred]
> > > > change. How do you change the text color on a button when it is[/color]
> > clicked?[color=darkred]
> > > >
> > >
> > > Funny, it worked fine for me in IE6 and NN7.2.
> > > What browser are you trying to get it to work in? It won't work in all
> > > browsers, though it should work in all that support the element.style
> > > property AFAIK.
> > >
> > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
> > > "http://www.w3.org/TR/REC-html40/loose.dtd">
> > > <html>
> > > <head>
> > > <title> New Document </title>
> > > <script type="text/javascript" language="javas cript">
> > > function changeBtn(btn)
> > > {
> > > if (! btn.style)
> > > {
> > > alert("Sorry, your browser doesn't support this operation.");
> > > return;
> > > }
> > > btn.style.backg round = "red";
> > > btn.style.color = "blue";
> > > return;
> > > }
> > > </script>
> > > </head>
> > >
> > > <body>
> > > <form id="f1" name="f1" action="" method="">
> > > <br>
> > > <input type="button" value="Try me" onClick="change Btn(this)">
> > > </form>
> > > </body>
> > > </html>[/color][/color]
>
> --
> Grant Wagner <gwagner@agrico reunited.com>
> comp.lang.javas cript FAQ - http://jibbering.com/faq
>
>[/color]

Change text color on a submit button when clicked?

Change text color on a submit button when clicked?

Comment

Comment

Comment

Comment

Comment