PDA

View Full Version : colour change of a td



raj_d
Nov 30th, 2014, 03:50 PM
Please help me solving the problem ....basically i want to change the colour of the td when i click the radio button in it.... I have the following code which is working perfectly ...but the problem is when i select a radio button it should display some information from the database..in this case it is not working..

<CODE><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Change Class Name onclick of radio</title>
<style type="text/css">
.off {
border:1px solid #FFF;
width: 170px;
background-color:inherit;
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #000000;
margin:2px 0;
display:block;
}
.on {
border-width:1px;
border-style: solid;
border-color : #4761A1 #000000 #000000 #4761A1;
width: 170px;
background-color: #2C427A;
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #FFF;
margin:2px 0;
display:block;
}
</style>
<script type="text/javascript">
function setOn()
{
var theRadios = document.getElementsByName('s');
for(var i = 0; i < theRadios.length; i++)
{
theRadios[i].parentNode.className = 'off'; //Sets all spans class name to off
theRadios[i].onclick = function() //assigns a function to the onclick event of the radios
{
setOn();
}
if(theRadios[i].checked == 1) //if the radio button is checked then it will give the span that its in a class name of on
{
theRadios[i].parentNode.className = 'on';
}
}
}
onload = setOn;
</script>
</head>

<body>

<table border="20" width="1325" height="75" BORDERCOLOR="red" bgcolor="white">

<tr>
<td><label class="off"><input type="radio" name="s" onclick=" submit()" value="s1">S1</td></label>
<td><label class="off"><input type="radio" name="s" onclick="javascript: submit()" value="s2">S2</label></td>

<td><label class="off"><input type="radio" name="s" onclick="javascript: submit()" value="s3">S3</label></td>

<td><label class="off"><input type="radio" name="s" onclick="javascript: submit()" value="s4">S4</label></td>

</tr>

</table>
</body>
</html></CODE>

when i include the follow

<CODE><?php

if(isset($_POST['s']))
{

if ($_POST['s']=="s1")
{

$s=$_SESSION["subject1"];
echo $_SESSION["subject1"];
$conn = mysql_connect("localhost","root","");
mysql_select_db("faculty",$conn);
$sql2 = "SELECT * FROM subject WHERE SUBNAME ='$s'";

$result3 = mysql_query($sql2,$conn) or die("Error querying database");
$num_rows = mysql_num_rows($result3);

echo "$num_rows Rows\n";
$row2 = mysql_fetch_array($result3);
//if(is_array($row))
if ($num_rows >0){
echo "more than one row";


$f1=$row2["facultyname"];
//$_SESSION['facultyname'] = $f1;
$f2=$row2["faculty2name"];
//$_SESSION['faculty2name'] = $f2;


}




?>

<table border="20" width="225" height="320" BORDERCOLOR="red" bgcolor="white">
<iframe id="myIframe" name="myIframe" width="0" height="0" frameborder="0"></iframe>
<form name="contact_form1" target="myIframe" action="http://localhost//final1/facultyfeedbacksaving.php" method="post" onSubmit="return validate_form1();">
<tr>
<td height=" 30" width="200"><input type="radio" name="faculty" value="f1" onclick="document.contact_form1.submit.disabled = false;"> <?php echo $f1 ;?></td>

</table>
</td>
</CODE>

Old Pedant
Dec 1st, 2014, 04:59 AM
I can't make any sense out of any of that. You have that PHP code that seems to get two values, $f1 and $f2, but then you never use those values.

You have that <form> with *ONE* radio button that really does nothing. Oh, it *seems* set the form's disabled property to false, but nothing ever set disabled to true, so "changing" it to the default property does nothing. Not that it really matters, because there is nothing in the <form> that can or will submit the <form>!!! There seems no point to that <form>.

&&&&&&&&

For the code at the top, it makes less sense. You have all those radio buttons that *SEEM* to be trying to submit a <form>. But there isn't any <form> in that code, so there is nothing that *CAN* be submitted. In actuality, though, your calls to submit() will never work because they are *NOT* trying to call a <form>'s submit property; they are simply calling a javascript function named submit but you don't have any such function.

As it turns out, none of what I just wrote matters. Because onload of the document you call that setOn() function which *CHANGES* each radio buttons onclick to call (wait for this!) setOn itself. So actually what will happen is that clicking on one of those radio buttons named "s" will *ONLY* change the background colors of the <label> elements. (Well, the code WOULD do this, but you are missing the </td> from the first <td> so who knows what will then happen?)

I have no idea what the two sets of codes mean, taken as a whole. I don't see any way in which they relate to each other.

raj_d
Dec 3rd, 2014, 07:31 AM
Thanks for your valuable explanation. But My intention is to get some data when i click the radio button along with change the colour of the td.

I.e when i click the radio button in a td then based on the value of the radio button it should get the data from the data base using php and at the same time the user should also know which radio button he is using (thats why i change the colour). My project is if a student click the (subject--radiobutton)..the corresponding faculty names should be displayed in another td....

Could you please help me by giving any suitable example code....Thanks a lot for your efforts...

Old Pedant
Dec 5th, 2014, 10:21 PM
Your HTML might look something like this:

<!DOCTYPE HTML><!-- use a modern doctype -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Change Class Name onclick of radio</title>
<style type="text/css">
.off {
border:1px solid #FFF;
width: 170px;
background-color:inherit;
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #000000;
margin:2px 0;
display:block;
}
.on {
border-width:1px;
border-style: solid;
border-color : #4761A1 #000000 #000000 #4761A1;
width: 170px;
background-color: #2C427A;
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #FFF;
margin:2px 0;
display:block;
}
</style>
</head>
<body>
Click on a button to see details about that faculty member:
<table border="20" width="1325" height="75" BORDERCOLOR="red" bgcolor="white">
<tr>
<td><label class="off"><input type="radio" name="faculty" value="121">John Adams</label></td>
<td><label class="off"><input type="radio" name="faculty" value="33">Ludvig Von Beethoven</label></td>
<td><label class="off"><input type="radio" name="faculty" value="213">Calvin Coolidge</label></td>
<td><label class="off"><input type="radio" name="faculty" value="41">Geena Davis</label></td>
</tr>
</table>
<iframe id="myIframe" name="myIframe" width="0" height="0" frameborder="0"></iframe>

<!-- put the javascript where it belong! at the end of the page -->
<script type="text/javascript">
var labels = document.getElementsByClassName("off");
for ( var i = 0; i < labels.length; ++i )
{
var lbl = labels[i];
var rb = lbl.getElementsByTagName("input")[0];
lbl.id = "LBLONOFF" + i;
rb.id = "RBONOFF" + i;
rb.onclick = changeit;
}

function changeit( )
{
for ( var i = 0; i < labels.length; ++i )
{
labels[i].className = "off";
}
var id = this.id.replace("RB","LBL");
document.getElementById(id).className = "on";
var frame = document.getElementById("myIFrame");
frame.src = "getFacultyDetails.php?facultyID=" + this.value;
frame.width = "700";
frame.height = "400";
}
</script>
</body>
</html>

Old Pedant
Dec 5th, 2014, 10:28 PM
And that would mean you could replace the <tr>...</tr> shown above with something like this PHP code:

<?php

$s=$_SESSION["subject1"];
$conn = mysql_connect("localhost","root","");
mysql_select_db("faculty",$conn);

$sql = "SELECT facultyid, facultyname FROM subject WHERE SUBNAME ='$s'";
$result = mysql_query($sql) or die("Error querying database");

$col = 0;
while ( $row = mysql_fetch_assoc($result) )
{
if ( $col % 4 == 0 ) { echo "<tr>\n"; }
echo "<td><label class=\"off\"><input type=\"radio\" name=\"faculty\" value=\"{$row["facultyid"]}\">"
. $row["facultyname"] . "</label></td>\n";
++$col;
if ( $col % 4 == 0 ) { echo "</tr>\n"; }
}
if ( $col % 4 != 0 ) { echo "</tr>\n"; }
?>

Or very similar. No?