Change text color on a submit button when clicked?

AFN · Jul 14, 2004

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?

kaeli · Jul 14, 2004

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>

--

AFN · Jul 14, 2004

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.background='Red'"
style="color:White;background-color:#336699;font-weight:bold;width:150px;"
/>

kaeli · Jul 14, 2004

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.background='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.

--

Grant Wagner · Jul 14, 2004

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 · Jul 15, 2004

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!

Change color of drawing when clicked	2	Nov 28, 2021
Change variable text colors inside printf	1	Mar 27, 2022
<Button ...> display is fine, except for two things	1	Oct 23, 2023
Changing a background-color	2	Aug 2, 2023
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
How to change background color to fit shape	1	Feb 11, 2023
Padding on a button for email clients	1	Feb 14, 2023
How to change the color in this script	1	Sep 9, 2022

Change text color on a submit button when clicked?

AFN

kaeli

AFN

kaeli

Grant Wagner

AFN

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads