473,216 Members | 2,034 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,216 software developers and data experts.

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 26949
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
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
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
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
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
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
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
by: ramkishor | last post by:
How can I change the color of button on mouse move over it. help .
11
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
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;...
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
0
by: veera ravala | last post by:
ServiceNow is a powerful cloud-based platform that offers a wide range of services to help organizations manage their workflows, operations, and IT services more efficiently. At its core, ServiceNow...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

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.