Change text color on a submit button when clicked?

Discussion in 'Javascript' started by AFN, Jul 14, 2004.

  1. AFN

    AFN Guest

    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?
     
    AFN, Jul 14, 2004
    #1
    1. Advertising

  2. AFN

    kaeli Guest

    In article <OzfJc.43699$>,
    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
     
    kaeli, Jul 14, 2004
    #2
    1. Advertising

  3. AFN

    AFN Guest

    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" <> wrote in message
    news:...
    > In article <OzfJc.43699$>,
    > 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
    >
     
    AFN, Jul 14, 2004
    #3
  4. AFN

    kaeli Guest

    In article <G4gJc.43705$>,
    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.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.


    --
    --
    ~kaeli~
    Those who jump off a bridge in Paris... are in Seine.
    http://www.ipwebdesign.net/wildAtHeart
    http://www.ipwebdesign.net/kaelisSpace
     
    kaeli, Jul 14, 2004
    #4
  5. AFN

    Grant Wagner Guest

    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.background='Red'"
    > style="color:White;background-color:#336699;font-weight:bold;width:150px;"
    > />
    >
    > "kaeli" <> wrote in message
    > news:...
    > > In article <OzfJc.43699$>,
    > > 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 <>
    comp.lang.javascript FAQ - http://jibbering.com/faq
     
    Grant Wagner, Jul 14, 2004
    #5
  6. AFN

    AFN Guest

    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" <> wrote in message
    news:...
    > 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.background='Red'"
    > >

    style="color:White;background-color:#336699;font-weight:bold;width:150px;"
    > > />
    > >
    > > "kaeli" <> wrote in message
    > > news:...
    > > > In article <OzfJc.43699$>,
    > > > 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 <>
    > comp.lang.javascript FAQ - http://jibbering.com/faq
    >
    >
     
    AFN, Jul 15, 2004
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Matt Adams
    Replies:
    0
    Views:
    909
    Matt Adams
    Aug 26, 2003
  2. zlf
    Replies:
    7
    Views:
    620
  3. Tony WONG
    Replies:
    2
    Views:
    608
    Tony WONG
    Apr 22, 2010
  4. Kamaljeet Saini
    Replies:
    0
    Views:
    464
    Kamaljeet Saini
    Feb 13, 2009
  5. Replies:
    7
    Views:
    394
    Mick White
    Feb 2, 2005
Loading...

Share This Page