Change button color under certain condition

**stepbystep** · 03-20-2011 08:09 PM

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==1 || document.welcome.noofpeople[i].value==2) { 

document.table.t1.disabled = true;

e = 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.

**JMRKER** · 03-20-2011 09:35 PM

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.

**stepbystep** · 03-21-2011 01:05 AM

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=0; i < document.welcome.noofpeople.length; i++)
   {
   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>

**stepbystep** · 03-21-2011 01:07 AM

Here is table form:

PHP Code:


<script type="text/javascript">

function get_radio_value() 
{ 
if(document.welcome.noofpeople[i].value==1 || document.welcome.noofpeople[i].value==2) { 
document.table.t1.disabled = true;
e = 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: Change button color under certain condition

Thread Tools

Display

Change button color under certain condition

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions