php - Is there a simple way using CSS or Javascript to change the background color of a div based on the value of a field

Question

What I'm attempting to do is have the background of a div change from white to a very light green based on the results of a value returned from MySQL. So I have a form that has a field called payment status, if they are paid in full I want the background color of the div to change to light green. If payment displays no payment I want the background to display a very light red.

I did a search and attempted using this change background color based on value

but it's a bit too complicated for me. I was hoping I could do this with javascript or css or a combination. This is my line of code for the payment status <td>Payment : </td> <td style="height: 30px; width: 145px;"><?php echo $data2['pay_status']?></td>

so based on the value of pay_status is what I want to use to change the background color.

*******UPDATE******** So after a lot of trial and error I've come up with this jsfiddle This works like a charm if I needed to change the background color of an input box but I need to change the div background color? can someone help me modify this to change the div instead of the input box?

Answer 1

I figured it out using javascript here is the jsfiddle Thanks to everybody that gave suggestions!

var div = document.getElementById('info');
var payment = document.getElementById('paystatus');
var green = "#66ff99";
var red = "#ff9999";
if (payment.value == 'Paid in Full') {
div.style.backgroundColor = green;
} else {
div.style.backgroundColor = red;
}

Answer 2

Assuming you have a PHP bool variable paidInFull, it should be straightforward to transfer that to a color on the page. For example:

<?php 
    $paidinFull = $mysqlresult['paymentStatus'] == 'paidinfull';
?>

<div style='background-color: <?php echo $paidInFull ? "#aaaaff" : "#ffaaaa"; ?>'>
    Payment status
</div>

Answer 3

Set a php variable to be what is returned from fronts database and have that as the class of the containing element. You'll need a couple of classes in your CSS.

Using phone and hard to write code on it but you can either use php to echo to value into the class value of the parent HTML element or run an if else and display the div depending on outcome

...

Forgot {} in the above buy this will work

Answer 4

I think I know what you're looking for. here is a jsfiddle with everything working. It's all javascript. Basically, based on the response from your server, you just highlight it green if it's paid and leave it white otherwise. Here's the javascript snippet:

// call this function after you've gotten your answer from your server $('.payment').each(function () { //first you see what's inside the div var wordsInsideDiv = $(this).html(); if(wordsInsideDiv.indexOf('not') != -1) { $(this).css('background-color', 'white');

}
else{
    $(this).css('background-color', 'green');
}
});

and the html I used:

the guy hasn't paid
<div class="payment">
    paid status: not paid
</div>

the guy paid
<div class="payment">
    paid status: totally paid
</div>

Notice that i'm simply using the word "not" to trigger whether or not I highlight it green. So whatever the actual value of your response from the database shoudl determine your if statement in the javascript.

cheers!