Changing row color based on selected value

I have a form that holds a drop down selection of 3 itmes(called current_status)
the options listed in the (current_status drop down) are:

Busy
Avaliable
Unstatused

the database will grab which ever
drop down item was selected by the user.

What I would then like to do is;
change the color of my form table to a specific color that is based off of
what the user selected in the drop down menu

here is what I have that is relevant to this adventure:
in my database I have a column called “current_status” which saves the “current status” as text -

I have an array page
that looks like this:

$stauses= array{
'busy'=>'busy'
'avaliable'=>'available'
'unstatused'=>"unstatused'

on my php page I have done this for “current_status”;

<label> Current Status
  <select name="current_status">
    <option>Select Status</option>
      <?php foreach($status as $key => $value) : ?>
     <?php endforeach; ?>
</select>
</label>

everything is working great! here is my question;

on my webpage, I do not have a “current_status” column. I have this field only in the pop up form.
I was wondering how to read the database column of “current_status” and then change my web table
to show different colored rows based on the value in that database column?

for example…if the database row shows that “current_status” is “busy” - then the web page table row should
be red.

if the database row shows that “current_status” is “available” - then the web page table row should
be green.

if the database row shows that “current_status” is “unstatused” - then the web page table row should
be grey.

does anyone know how I might be able to pull this off or maybe have a tutorial they can point me to?

2 Likes

Are you writing the status into the database rows? If so, then when the rows are populated on the web page, the background-color can be applied to each table cell when that status is read for that row. So where the status is ‘busy,’ the class variable for each table cell in the row is filled in as class=“busy” and in the CSS you have .busy {background-color: red}

2 Likes

hi WebSteve and thank you for answering. yes, the current_status is an actual column in my database table and on the web form that I have current_status is a drop down selection that the user can select either “busy” , “available” or “unstatused”. the database will then store the selection of this drop down as text “busy”, “available” or “ustatused”…whichever one the user selected. I have a page called “system_helpers” that the main page calls on that holds the array(I call it the key page) and I have included that page in my original post above. I have to head out for a bit today, but will try to incorporate your suggestion the best I can and will post the work with the result in a few hours k :slight_smile:

oh…hey…wait! let me ask you this:
is there a way I can attach colors to my key page? this is the (system_helpers) key page that the main page looks to…

$stauses= array{
'busy'=>'busy'
'avaliable'=>'available'
'unstatused'=>"unstatused'

is there a way i can do maybe something like this??

$stauses= array{
'busy'=>'busy' color=red
'avaliable'=>'available' color=green
'unstatused'=>"unstatused' color=grey

? lol…i dont know it was just a 1/2 thought on my way out the door!

You could make it an array of arrays.

$statuses = array(
array('busy'=>'busy', 'colour'=>'red'),
array('available'=>'available', 'colour'=>'green')
... and so on
)

and so on.

I think if I was using an array I’d probably do this instead:

$statuses = array(
array('status'=>'busy', 'colour'=>'red'),
array('status'=>'available', 'colour'=>'green')
... and so on

just because I think it’d be easier to access each element of the sub-arrays.

I take it the sample is just that - otherwise what’s the reason for having the array index and contents the same? And presumably when you store the status in your database, you don’t store it as that text, you have a status code?

It’d be easier, though, to use the method @WebSteve suggested - define a CSS style aligned to the status code as stored in your database.

Yes, but it’s the job of CSS to define how stuff looks, use PHP to assign a class based on status:-
class="'.$status.'"
Then let CSS do its thing.

Having keys and values that match seems redundant. If they will always be the same just have a non-associative array or use numeric keys if you save the status as an integer in the table.

2 Likes

well not exactly droopsnoot! I have a drop down that the user selects “busy” , “available” or “unstatused” from inside my form and the drop down is bound to a column in my database table that is called “current_status”. the “current_status” database datatype is varchar50. I did this because the dropdown in the form is only going to have those 3 selections, so I did not want to make a “status” table and I did not feel the need to store the value as a int. I may have made a mistake in my thinking, but lol…that is nothing new! if you think I can achieve coloring my page table in a better way…by all means I will most assuredly listen! being fairly new to php…pdo…ajax…javascript…I need all the direction I can get!

Using numeric status values doesn’t necessarily lead to having a separate table to store them in - you could always define constants for their values in your main ‘include’ file, presuming you have one perhaps for your database connection routines and so on. That would still give the flexibility to allow you to add a status in the future without changing everywhere you’ve hard-coded it.

At one point it would have been a serious offence to “waste” all that space storing identical strings over and over, but I’m showing my age there, when ordering the “big” server meant it came with a 20Mb hard disc. These days I guess it’s not so important.

It could still use an included array similar to the existing one.

$stauses= array(
  0 => 'busy',
  1 => 'available',
  2 => 'unstatused'
);

Then use something like:-

<form method="post" action="doform.php" class="<?= $statuses[$statusId] ?>">
// Where $statusId is the integer got from the database table.

…to access the status string where you need it.

3 Likes

ahaaaa! now I think I can get that done :)…in my database I have a column “current_status” and it is a varchar 100. My html table page calls on a page called “system_helpers” where the statuses are in an array. SO…if i were to go back into my database - drop the “current_status” column from the table and instead - put “available” (int) “busy”(int) and “unstatused” (int)…and then implement your suggestions by changing the system_helper page to the $statuses array, and adding the class $statuses[$statusId]…this should be good, no?!

I wouldn’t do that - I’d stick with a single column called “status”, make it an int or a short int, and then store either 0, 1 or 2 (or 1, 2 or 3) for the status, which you can reference via your array.

If you were to do it with separate columns, it would logical to make them a BOOLEAN type, since each will be either true or false. But that way, you have to make sure that you never get more than one of them set to “true”, or you won’t know which is correct. Hence using a single column for the status, there can never be any confusion.

2 Likes

thanks :), I will give it a try!

ohhh I think something is really wrong here and maybe I might have to rethink the whole structure! here is what I did…
I changed my column "current_status(varchar) in the dataTable to “status”(int)…I then went to my array and changed it to:

$stauses= array(
  0 => 'busy',
  1 => 'available',
  2 => 'unstatused'
);

and then I went to the code block and changed this:

<form id="add_multytask" action="#" method="POST">
  <div class="large-6 columns">
    <label>Current Status</label>
      <select name="current_status">
        <option>Select One</option>
            <?php foreach($statuses as $key => $value) : ?>
              <option value="<?php echo $key; ?> <?php echo $value; ?></option>
        <?endforeach; ?>
       </select>
</div>

TO THIS;

<form id="add_multytask" action="#" method="POST" class="<?= $statuses[$statusId] ?>">
  <div class="large-6 columns">
    <label>Current Status</label>
      <select name="status">
        <option>Select One</option>
            <?php foreach($statuses as $key => $value) : ?>
              <option value="<?php echo $key; ?> <?php echo $value; ?></option>
        <?endforeach; ?>
       </select>
</div>

now the form drop down selection shows the selections as “busy”, “available” and “unstatused” whereas the form table shows “0” (not the name of the selection but the int)…and trying to add a new enrty fails as does editing. and I still dont understand where or how in the coding am I going to be able to show color based on the selection?

Presuming your current status is stored in a variable called $stat, you would simply

echo $statuses[$stat];

to display the name of the current status. Whatever value $stat has - 0, 1 or 2 - is used as the index for your array.

I take it this repeated definition

$stauses= array(

is a typo, and really reads $statuses = array( and so on?

This line

              <option value="<?php echo $key; ?> <?php echo $value; ?></option>

isn’t right either - you’ve got a close-quote and a close-angle-brace (sorry, forgot the proper name for >) missing after you echo the array index stored in $key. And this line

<?endforeach; ?>

looks as if it should really be

<?php endforeach; ?>

though I know there’s a shortform set of PHP tags - as I don’t use them, I don’t know whether they’re used here. I don’t think so, though.

That’s in this line

<form id="add_multytask" action="#" method="POST" class="<?= $statuses[$statusId] ?>">

where you assign a class to your form, and the name of that class will be whatever your status names are, as defined in your array, and that presumes the current status is stored in $statusId rather than as I used in my example above. To make it use a colour, you then need to define those classes in your page CSS.

If you want to have the form change colour whenever the user changes the selection, you’ll need a bit of JavaScript to change the class on the form whenever that value changes. That’s relatively simple, but not a PHP thing. First you need to get it to assign the correct class to the form, then you can worry about how to change it.

2 Likes

heyyyy…hoooray! we got something happening in a positive way :)! I can now add, edit and delete using the new method we are working on. Here is what I have done per your suggestion;

the database column is now called “status” and it is a small int.

the html page code block that is pertaining to the status selection is this:

 <form id="add_multytask" action="#" method="POST" class="<?= $current_status[$status] ?>">
   <div class="large-6 columns">
      <label>Select Current Status </label>
          <select name="status">
          	<?php foreach($status as $key => $value) : ?>
            	<?php 
					if($key == $task->status) {
						$selected ='selected';
					}else{
						$selected='';
					}
				?>
            	<option value="<?php echo $key; ?>" <?php echo $selected; ?>><?php echo $value; ?></option> 
            <?php endforeach; ?>
        </select>
     
     
    </div>
   </div> 
	 <input type="hidden" name="id" value="<?php echo $task->id; ?>">
  	 <input name="submit" type="submit" class="add_btn button right small" value="submit"> 
  	 <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</form>
</div>

the page that contains the array is this:

$status = array(
'0'=>'unstatused', 
'1'=>'busy', 
'2'=>'available'

)

so now, it is adding and stuff correctly :)...so now can we work on how to color the rows based on selection?? 

Sure. Edit your CSS file to style the class that you specify in the <form> tag which is based on your status names. Have a look at the name given to the class by viewing the source. Won’t you need to change that line to use $status[$task->status] though, or do you have another array called $current_status?

1 Like

no, i had the array named current_status but I changed it in the last attempt to $status. so no…no other array! (lol having a hard enough time with just 1 array!..sheesh)! okay…so do you mean this?

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

and how do I mark your posts as accepted or helpful? you know how on other sites when someone posts an answer that helps you, you can mark the answer and rate it up? is there a way to do that here too?

Just click on the heart icon under the post.

1 Like

great thanks :slight_smile: