Checking Radio Status and Changing Styles
Posted: Wed Oct 26, 2011 1:46 pm
I am trying to have the status of a radio button control the style of a text area, where the style of the radio once selected changes the style of the testarea to match. The default status of all the radio buttons are "unchecked".
What I have right now is a form that has four radio buttons and the labels are each a different color. Once i select a radio I click on the submit button and it changes the color of the text area. What I am trying to do is to make it so that when I select the radio the color of the textarea changes.
The error message I get currently when I run the code is UNDEFINED INDEX. I know this is going to happen because I have not selected a radio button. Once i select the button and click the submit the color changes correctly. That is good but it is not what I want to do. I want the color to change when I click in the radio NOT when I click the submit.
I have included my code below.
Im thinking that it probably needs to be an onload event to check the status of the radio buttons and then an onclick for each of the radio buttons, but Im not sure how to go about doing that.
If anyone can give me a heads up on this I would be very grateful.
What I have right now is a form that has four radio buttons and the labels are each a different color. Once i select a radio I click on the submit button and it changes the color of the text area. What I am trying to do is to make it so that when I select the radio the color of the textarea changes.
The error message I get currently when I run the code is UNDEFINED INDEX. I know this is going to happen because I have not selected a radio button. Once i select the button and click the submit the color changes correctly. That is good but it is not what I want to do. I want the color to change when I click in the radio NOT when I click the submit.
I have included my code below.
Code: Select all
<html>
<head>
</head>
<body>
<?php
$color1 = "LightSteelBlue";
$color2 = "orange";
$color3 = "yellowgreen";
$color4 = "pink";
$color5 = "yellow";
$color6 = "purple";
$color7 = "grey";
$selected_radio = $_POST['CATEGORIES'];
if ($selected_radio == 'health'){
$color = $color1;
}else
if($selected_radio == 'wellness'){
$color = $color2;
}else
if($selected_radio == 'fitness'){
$color = $color3;
}else
if($selected_radio == 'nutrition'){
$color = $color4;
}else
$color = $color5;
?>
Please choose a category .
<br />
<form id="form1" name="form1" method="post" action="">
<table width="99%">
<tr>
<td><!-- <label style="background-color:<?php echo $color5; ?>;">
<input type="radio" name="CATEGORIES" value="health" id="CATEGORIES_0" checked="checked" /> Empty</label> -->
</td>
</tr>
<tr>
<td >
<label style="background-color:<?php echo $color1; ?>;">
<input type="radio" name="CATEGORIES" value="health" id="CATEGORIES_1" /> HEALTH </label>
<label style="background-color:<?php echo $color2; ?>;">
<input type="radio" name="CATEGORIES" value="wellness" id="CATEGORIES_2" /> WELLNESS </label>
<label style="background-color:<?php echo $color3; ?>;">
<input type="radio" name="CATEGORIES" value="fitness" id="CATEGORIES_3" /> FITNESS </label>
<label style="background-color:<?php echo $color4; ?>;">
<input type="radio" name="CATEGORIES" value="nutrition" id="CATEGORIES_4" /> NUTRITION </label>
</td>
</tr>
</table>
<p> You have chosen the category of <?php print $selected_radio; ?></p>
<p>
<label style="background-color:<?php echo $color; ?>;">Subject
<br />
<input type="text" name="subject" id="subject" />
</label>
</p>
<p>
<label style="background-color:<?php echo $color; ?>;">Question
<br />
<textarea name="question" id="question" cols="45" rows="5"></textarea>
</label>
</p>
<p>
<input type="submit" name="submit1" id="submit" value="Submit" />
</p>
</form>
<?php
?>
</body>
</html>
If anyone can give me a heads up on this I would be very grateful.