www.webdeveloper.com
Results 1 to 4 of 4

Thread: Change button color under certain condition

  1. #1
    Join Date
    Feb 2011
    Posts
    43

    Question Change button color under certain condition

    hye..

    I'm facing a problem to change the button from invisible to white color under if condition. I just manage to make it disable. Can you please tell me what's is the problem please.

    Here are my js coding:

    PHP Code:
    <script type="text/javascript">

    function 
    get_radio_value() 

    if(
    document.welcome.noofpeople[i].value==|| document.welcome.noofpeople[i].value==2) { 
    document.table.t1.disabled true;
    document.getElementById("t1");
    if(
    null != e)
    {
    e.style.color "white";



    </script> 
    here are the button:

    PHP Code:
    <input name="t1" id="t1" disabled="disabled" style="height: 25px; width: 30px; border: transparent; background-color: transparent; font-weight: bolder; color: #FF00FF;" type="submit" value="T1" class="style4" /> 
    Thanks in advance for your help.

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350
    Several problems IF this is a RADIO BUTTON check...
    1. You have the button as a type="submit", not type="radio".
    2. Your value for the button is "T1", not "t1".
    3. I don't see a radio button by the name of "noofpeople", nor the <form> assignment.
    Hard to tell if that portion is correct when it is missing from your post.
    Also, I don't see a "document.table.ti.value" anywhere (???)
    4. I'm not sure what you mean by color from "invisible" (???) to white.

  3. #3
    Join Date
    Feb 2011
    Posts
    43
    the radio button is not in the same form. It's at the previous form. The value of the radio button is retrieve from the form name welcome. What i want to do is when user choose radio button with the value 1 or 2. Then, the button on form table will be turn from invisible to white color and disable, so that user can't pick it.


    Here is welcome form:
    PHP Code:
    <script type="text/javascript">


    function 
    get_radio_value()
    {
    for (var 
    i=0document.welcome.noofpeople.lengthi++)
       {
       if (
    document.welcome.noofpeople[i].checked)
          {
          var 
    rad_val document.welcome.noofpeople[i].value;
          }
       }
    }


    </script>

    </head>

    <body>

    <form action="TableManagement.php" name="welcome" method="post" style="width: 644px; height: 419px; background-color: #008080; margin-left: auto; margin-right: auto;">
        <div class="style1" style="height: 122px; outline-color: #00FFFF; color: #008080;">
            <br />
            <h1 class="style2">WELCOME TO DOLLY FRIED CHICKEN&nbsp; RESTAURANT</h1><br />
            <br />
            <fieldset name="Group1" class="style3" style="width: 563px; font-family: 'Berlin Sans FB Demi'; background-color: #00FFFF; color: #006666; height: 123px;">
            <div class="style4" style="height: 130px; width: 571px">
                <br />
                &nbsp;&nbsp;&nbsp; NO OF PEOPLE/TABLE :&nbsp;
            <input name="noofpeople" id="noofpeople" type="radio" value="0" />&nbsp;0 ( Take Away Only! 
                )&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input name="noofpeople" id="noofpeople" type="radio" value="1" />1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input name="noofpeople" id="noofpeople" type="radio" value="2" />2&nbsp;&nbsp;&nbsp;&nbsp;<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
            <input name="noofpeople" id="noofpeople" type="radio" value="3" />3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input name="noofpeople" id="noofpeople" type="radio" value="4" />4&nbsp;&nbsp;&nbsp;&nbsp;<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
            <input name="noofpeople" id="noofpeople" type="radio" value="5" />5&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input name="noofpeople" id="noofpeople" type="radio" value="6" />6<br />
                &nbsp;&nbsp;
            <img src="table.gif" alt="" height="119" width="148"/><br />
                <br />
                <br />
                <br />
                <br />
                <br />
            </div>
            </fieldset>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <br />
            <br />
            &nbsp;<input name="btnpertable" type="submit" value="DONE" onclick="get_radio_value()" style="width: 104px; height: 49px; border-top-color: #00FFFF; border-right-color: #00FFFF; border-left-color: #00FFFF; border-color: #00FFFF; border-bottom: #00FFFF; border-bottom-color: #00FFFF; border: #00FFFF; background-color: #00FFFF; font-size: medium; font-family: 'Comic Sans MS'; font-weight: bold; font-style: normal; color: #006666" />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
            
    </form>

    </body>

    </html> 

  4. #4
    Join Date
    Feb 2011
    Posts
    43
    Here is table form:

    PHP Code:
    <script type="text/javascript">

    function 
    get_radio_value() 

    if(
    document.welcome.noofpeople[i].value==|| document.welcome.noofpeople[i].value==2) { 
    document.table.t1.disabled true;
    document.getElementById("t1");
    if(
    null != e)
    {
    e.style.color "white";



    </script>

    </head>

    <body>

    <form action="OrderFood.php" name="table" method="post" style="margin: auto; height: 462px; width: 645px; background-image: url('plan.png');">
        &nbsp;&nbsp;&nbsp; <br />
    &nbsp;&nbsp;&nbsp;&nbsp;<br />
    &nbsp;&nbsp;&nbsp;
        <strong>
        <input name="t1" id="t1" disabled="disabled" style="height: 25px; width: 30px; border: transparent; background-color: transparent; font-weight: bolder; color: #FF00FF;" type="submit" value="T1" class="style4" /></strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
        <input name="t2" style="height: 35px; width: 45px; border: transparent; background-color: transparent; font-weight: bolder; color: #FF00FF;" type="submit" value="T2" class="style10"  />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input name="t3" style="height: 25px; width: 30px; border: transparent; background-color: transparent; font-weight: bolder; color: #FF00FF;" type="submit" value="T3" class="style14" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input name="t4" style="height: 35px; width: 45px; border: transparent; background-color: transparent; font-weight: bolder; color: #FF00FF;" type="submit" value="T4" class="style10" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        &nbsp; <br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br />
    &nbsp;&nbsp;&nbsp;
        <input name="t5" style="height: 25px; width: 30px; border: transparent; background-color: transparent; font-weight: bolder; color: #FF00FF;" type="submit" value="T5" class="style13" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
        <input name="t6" style="height: 35px; width: 45px; border: transparent; background-color: transparent; font-weight: bolder; color: #FF00FF;" type="submit" value="T6" class="style10"  />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input name="t7" style="height: 25px; width: 30px; border: transparent; background-color: transparent; font-weight: bolder; color: #FF00FF;" type="submit" value="T7" class="style14" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input name="t8" style="height: 35px; width: 45px; border: transparent; background-color: transparent; font-weight: bolder; color: #FF00FF;" type="submit" value="T8" class="style10" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input name="t9" style="height: 25px; width: 30px; border: transparent; background-color: transparent; font-weight: bolder; color: #FF00FF;" type="submit" value="T9" class="style14" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input name="t10" style="height: 25px; width: 30px; border: transparent; background-color: transparent; font-weight: bolder; color: #FF00FF;" type="submit" value="T10" class="style12" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br />
    &nbsp;&nbsp;&nbsp;&nbsp;
        <input name="t11" style="height: 25px; width: 30px; border: transparent; background-color: transparent; font-weight: bolder; color: #FF00FF;" type="submit" value="T11" class="style13" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
        <input name="t12" style="height: 35px; width: 45px; border: transparent; background-color: transparent; font-weight: bolder; color: #FF00FF;" type="submit" value="T12" class="style10"  />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input name="t13" style="height: 25px; width: 30px; border: transparent; background-color: transparent; font-weight: bolder; color: #FF00FF;" type="submit" value="T13" class="style14" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input name="t14" style="height: 35px; width: 45px; border: transparent; background-color: transparent; font-weight: bolder; color: #FF00FF;" type="submit" value="T14" class="style10" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input name="t15" style="height: 35px; width: 45px; border: transparent; background-color: transparent; font-weight: bolder; color: #FF00FF;" type="submit" value="T15" class="style10" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input name="t16" style="height: 35px; width: 45px; border: transparent; background-color: transparent; font-weight: bolder; color: #FF00FF;" type="submit" value="T16" class="style10" />&nbsp;&nbsp;&nbsp;
        <br />
        <br />
    &nbsp;&nbsp;&nbsp;&nbsp;
        <input name="t17" style="height: 25px; width: 30px; border: transparent; background-color: transparent; font-weight: bolder; color: #FF00FF;" type="submit" value="T17" class="style13" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
        <input name="t18" style="height: 35px; width: 45px; border: transparent; background-color: transparent; font-weight: bolder; color: #FF00FF;" type="submit" value="T18" class="style10"  />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input name="t19" style="height: 25px; width: 30px; border: transparent; background-color: transparent; font-weight: bolder; color: #FF00FF;" type="submit" value="T19" class="style14" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input name="t20" style="height: 35px; width: 45px; border: transparent; background-color: transparent; font-weight: bolder; color: #FF00FF;" type="submit" value="T20" class="style10" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input name="t21" style="height: 25px; width: 30px; border: transparent; background-color: transparent; font-weight: bolder; color: #FF00FF;" type="submit" value="T21" class="style14" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input name="t22" style="height: 25px; width: 30px; border: transparent; background-color: transparent; font-weight: bolder; color: #FF00FF;" type="submit" value="T22" class="style14" />&nbsp;<br />
        <br />
        <br />
    &nbsp;&nbsp;&nbsp;&nbsp;
        <input name="t23" style="height: 40px; width: 120px; border: transparent; background-color: transparent; font-weight: bolder; color: #FF00FF;" type="submit" value="T23" class="style11" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input name="t24" style="height: 40px; width: 120px; border: transparent; background-color: transparent; font-weight: bolder; color: #FF00FF;" type="submit" value="T24" class="style11" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input name="t25" style="height: 40px; width: 120px; border: transparent; background-color: transparent; font-weight: bolder; color: #FF00FF;" type="submit" value="T25" class="style11" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <br />
        <br />
        <br />
    &nbsp;&nbsp;&nbsp;&nbsp;
        <input name="t26" style="height: 40px; width: 120px; border: transparent; background-color: transparent; font-weight: bolder; color: #FF00FF;" type="submit" value="T26" class="style1" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input name="t27" style="height: 40px; width: 120px; border: transparent; background-color: transparent; font-weight: bolder; color: #FF00FF;" type="submit" value="T27" class="style11"  />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input name="t28" style="height: 40px; width: 120px; border: transparent; background-color: transparent; font-weight: bolder; color: #FF00FF;" type="submit" value="T28" class="style11" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </form>

    </body>

    </html> 

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles