Changing row color based on selection

Beginners - Learning PHP
#1

hello everyone. I have been to several different places looking for help - and I just did get quite a bit of help over at sitepoint, however, I am still at a loss on how to make this happen;

what I am hoping to achieve is to have the rows in my html table change background colors based on a selection the user makes from a drop down in my form. I have a column in my database table called “status” and it is an integer. I have an array page that lists the different “status” selections;
$status = array(
‘0’=>‘unstatused’,
‘1’=>‘busy’,
‘2’=>‘available’
)

the html page for this is setup like this;

<form id="add_multytask" action="#" method="POST" class="<?= $status[$task->$status]   ?>">

and the code block in question is this one;

 <div class="large-6 columns">
  <label>Status </label>
    <select name="status">
     	<option>Select Status</option>
    	<?php foreach($status as $key => $value) : ?>
        	<option value="<?php echo $key; ?>"><?php echo $value; ?></option> 
        <?php endforeach; ?>
  
    </select>
   
</div>

my question is this - how can I make the html table row change color based on the “status” selected? when the user selects “unstatused” in the pop-up form and hits the submit button - I want the row the user is in to change to a grey color, and if they select “busy” then I need to have that row change its background color to “yellow” and if “available” is selected, then i need that row to be green.

I have tried everything that my limited knowledge will allow and am really hoping that someone can help me get this done?

#2

Hello and welcome to the forum, i’m sure that someone may have a better answer for you but i will get the ball rolling:

sounds to me like you have a table which reflects a status for a user (logged into a session?). you want to allow the user to set a status then change the tr bg to a status color. yes?

i assume that you are using a form submission with the select drop down, yes? or are you using javascript onchange or something? i ask becaue javascript or ajax could do this as opposed to a form submission.

if you continue with a post form submission, then have you tried setting the post value (which should be a color value) to a variable?

$statusColor = htmlentities($_POST['statusColor'], ENT_QUOTES, 'UTF-8');

assuming you have a class for the row: <tr class="StatusBar">

<style>
tr.StatusBar { background: <?php echo $statusColor; ?>; }
</style>

also, this assumes that you use a hex value or color name as the post value:
you would need to store this value in the option or in the array for access. You have not associated a color with a status, so this needs to be done for you to do something with it.

<select name="statusColor">
<option value="#a0a0a0">No Status</option>
#3

good day back to you Johnphpnewb! yes - I am using sessions, but that has no bearing on this. Here is the scenerio; (as login is done only by company and not by user)

I have a database that stores a table called “tasks” and my php form holds a tasklist that pulls its values from the datatable. yes, the field they are selecting the status from is a dropdown in the form…
I do not have a class for the row…

I am not using javascript onchange…simply because i am new enough to php and even newer to PDO and have no freakin idea how to code the onchange event :frowning:

#4

Hello again, the session does have a bearing on the matter if you wish to store the values in a database. The reason is because you are essentially making the values persistent. I would read the status and apply a color to a session variable, then display that color. you can all ready apply the color to the row after the user has logged in. The user can change the value via form and prg method to return for instant results.

I would apply a color to the status when it is pulled from the database:

switch (database-status-field) {
case 'unstatused': $_SESSION['statusColor'] = 'gray';
case 'busy': $_SESSION['statusColor'] = 'yellow';
case 'available': $_SESSION['statusColor'] = 'green';
default //what if something goes wrong? set a default color and log the error
}

then use this session variable to display the color via css.

#5

my mind is very cloudy today. I am programming my app everyday for 12-16 hours. I am usually exhausted, so i have no time to invest in someone elses code. My answers are sometimes sloppy due to this fact. Now that i am not coding, i am thinking about your situation. I have to ask, is this some sort of chat or message system? what are you trying to accomplish with this code? if you are trying to allow a session user to show a status to other session users (logged in or not), then this is a complicated question which is also a security issue. Thus, few people will try to answer this question.

Essentially, you need to associate a color with a status. Many ways to do this but you need to pick one that is best for your situation. Then you need to find a method to display this color value in the table row (usually css as hard-coded values are outdated, id est, tr bgcolor="").

if you are trying to show this status to other session users, then you will need a database of all of these values which need to be associated with a user. All user status values need to be updated in the user database and the public display database. Users must have a way of viewing other user status bars safely and securely, which is complicated.

#6

Do you have classes in your CSS to deal with the class being used?

#7

all this really is - is a simple to-do list that i want to show color to. if the status selected in the popup form is set to “unstatused” the table row on my page should turn to a grey background. if someone marks the task as completed, then the row on the page will turn green. - and if the task is in progress then i need the row to be yellow…“busy” and “available” were just example words that i used to try to get what im wanting to do across.

Sessions does not have any bearing. I am doing a site that asks for a login and a password. the login is set for a company name and the password is the same for anyone that works for that company. these credentials are held in an “accounts” table. the to-do list, while is calling sessions…thats just so that that COMPANY can stay logged in in their own little web-module" after they login then they can move around inside of their web-pages only and cannot go into another companies web-mod. so…thats why i say sessions is not relevant to this code.

ASTONECIPHER…no, I do not have a class in my css…i would need to make a css entry for ;
.status? or .task? or would it have to be .status .completed and .status .unstatused and .status .inprogress?

#8

Add CSS rules for whatever you want to change the color of - to.

So if busy is red, have a class for busy.

Now you handle this a few ways. First, you have the javascript to update the class to the correct one. JQuery makes this easier.

$('#element').attr( "class", "{the new class}" );

Now, I am assuming that you would also need to update a database to ensure this is the same for all people viewing and not just that user?

Now you need to also make a call to a processor page to update that where the persistent storage is. You would use an AJAX request to update that piece.
All rolled into one.

$("input").click(function(){
  var id = $("#elementID").val();
  var status = $("#elementID").val();
  $.post("taskprocessor.php", {id: txt, status: status}, function(result){
    $("#element").attr( "class", status );
  });
});
1 Like
Sponsor our Newsletter | Privacy Policy | Terms of Service