By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,647 Members | 1,124 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,647 IT Pros & Developers. It's quick & easy.

Change text color on a submit button when clicked?

P: n/a
AFN
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.background='red' to change the background color to red.
But if I say style.color='green' to change the text color, it does not
change. How do you change the text color on a button when it is clicked?
Jul 23 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
In article <Oz******************@twister.socal.rr.com>,
DE************************@yahoo.com enlightened us with...
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.background='red' to change the background color to red.
But if I say style.color='green' to change the text color, it does not
change. How do you change the text color on a button when it is clicked?


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="javascript">
function changeBtn(btn)
{
if (! btn.style)
{
alert("Sorry, your browser doesn't support this operation.");
return;
}
btn.style.background = "red";
btn.style.color = "blue";
return;
}
</script>
</head>

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

--
--
~kaeli~
Humpty Dumpty was pushed!
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 23 '05 #2

P: n/a
AFN
IE6

Here's the code:

<input type="submit" name="btnSubmit" value="Next" id="btnSubmit"
onclick="this.value = 'Please wait...';this.disabled =
true;this.style.color='Green';this.style.backgroun d='Red'"
style="color:White;background-color:#336699;font-weight:bold;width:150px;"
/>

"kaeli" <ti******@NOSPAM.comcast.net> wrote in message
news:MP************************@nntp.lucent.com...
In article <Oz******************@twister.socal.rr.com>,
DE************************@yahoo.com enlightened us with...
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.background='red' to change the background color to red.
But if I say style.color='green' to change the text color, it does not
change. How do you change the text color on a button when it is clicked?


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="javascript">
function changeBtn(btn)
{
if (! btn.style)
{
alert("Sorry, your browser doesn't support this operation.");
return;
}
btn.style.background = "red";
btn.style.color = "blue";
return;
}
</script>
</head>

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

--
--
~kaeli~
Humpty Dumpty was pushed!
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 23 '05 #3

P: n/a
In article <G4*****************@twister.socal.rr.com>,
DE************************@yahoo.com enlightened us with...
IE6

Here's the code:

<input type="submit" name="btnSubmit" value="Next" id="btnSubmit"
onclick="this.value = 'Please wait...';this.disabled =
true;this.style.color='Green';this.style.backgroun d='Red'"
style="color:White;background-color:#336699;font-weight:bold;width:150px;"
/>


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

Jul 23 '05 #4

P: n/a
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:
IE6

Here's the code:

<input type="submit" name="btnSubmit" value="Next" id="btnSubmit"
onclick="this.value = 'Please wait...';this.disabled =
true;this.style.color='Green';this.style.backgroun d='Red'"
style="color:White;background-color:#336699;font-weight:bold;width:150px;"
/>

"kaeli" <ti******@NOSPAM.comcast.net> wrote in message
news:MP************************@nntp.lucent.com...
In article <Oz******************@twister.socal.rr.com>,
DE************************@yahoo.com enlightened us with...
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.background='red' to change the background color to red.
But if I say style.color='green' to change the text color, it does not
change. How do you change the text color on a button when it is clicked?


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="javascript">
function changeBtn(btn)
{
if (! btn.style)
{
alert("Sorry, your browser doesn't support this operation.");
return;
}
btn.style.background = "red";
btn.style.color = "blue";
return;
}
</script>
</head>

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


--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq
Jul 23 '05 #5

P: n/a
AFN
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" <gw*****@agricoreunited.com> wrote in message
news:40***************@agricoreunited.com...
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:
IE6

Here's the code:

<input type="submit" name="btnSubmit" value="Next" id="btnSubmit"
onclick="this.value = 'Please wait...';this.disabled =
true;this.style.color='Green';this.style.backgroun d='Red'"
style="color:White;background-color:#336699;font-weight:bold;width:150px;" />

"kaeli" <ti******@NOSPAM.comcast.net> wrote in message
news:MP************************@nntp.lucent.com...
In article <Oz******************@twister.socal.rr.com>,
DE************************@yahoo.com enlightened us with...
> 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.background='red' to change the background color to

red. > But if I say style.color='green' to change the text color, it does not > change. How do you change the text color on a button when it is

clicked?
>

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="javascript">
function changeBtn(btn)
{
if (! btn.style)
{
alert("Sorry, your browser doesn't support this operation.");
return;
}
btn.style.background = "red";
btn.style.color = "blue";
return;
}
</script>
</head>

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


--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq

Jul 23 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.