473,508 Members | 2,333 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Change text color on a submit button when clicked?

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
5 26989
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
17067
by: Matt Adams | last post by:
As well known I could specify the text color in the body tag like: <BODY TEXT=WHITE LINK=WHITE VLINK=RED ALINK=WHITE> What I want to achieve now is that always (!) the text of the last visited...
6
18537
by: liglin | last post by:
The following script changes the color of text with the onmousover event. How can it be modified so it changes the text when the button is clicked? I'd want to avoid layers or CSS. Thanks,...
1
2262
by: Yeah | last post by:
I have a multiple choice quiz where I would like to use CSS to change the color of the answers upon clicking them. I would like to present the right and wrong answers up front, rather than direct...
11
19570
by: Yeah | last post by:
I have a multiple choice quiz where I would like to use CSS to change the color of the answers upon clicking them. I would like to present the right and wrong answers up front, rather than direct...
0
1082
by: | last post by:
hi, selected items in check box disappears when submit button is clicked on aspx page. check box is pasted on .ascx page and which is pasted on aspx page any ideals cheers sam
3
2931
by: Olivier Verdin | last post by:
Hi, I am developing a multi-language application in ASP.NET in c#. I am using a file field html control to upload an image. I would like to change the text on the button "browse" that comes...
3
7414
by: ramkishor | last post by:
How can I change the color of button on mouse move over it. help .
11
9156
by: JWest46088 | last post by:
I am working in Dreamweaver CS4 and have a contact form. I am using PHP to send the info. I have a disabled textbox that I want to use to display whether the contact form was sent successfully or...
0
1259
by: Ellyyra | last post by:
I am trying to make a 'Character Generator' for a website. In the first page they are asked for three pieces of information each with a group of radio buttons; Gender-Male, Female;...
0
7225
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
7382
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
1
7042
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
7495
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
5627
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
3193
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...
0
1556
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
1
766
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
418
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.