I have a form with this drop list
<select name="status" class="form-control" style="width:100px; float:left;">
<option value="0" <?php if($status == 0)echo 'selected="selected"';?>></option>
<option value="1" <?php if($status == 1)echo 'selected="selected"';?>>Present</option>
<option value="2" <?php if($status == 2)echo 'selected="selected"';?>>Absent</option>
</select>
I want to change background color like this if Present is selected its green and when absent is selected its red.
Can someone please guide.
Regards,
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<select name="status" class="form-control" style="width:100px; float:left;">
<option value="0" <?php if($status == 0)echo 'selected="selected"';?>></option>
<option value="1" <?php if($status == 1)echo 'selected="selected"';?>>Present</option>
<option value="2" <?php if($status == 2)echo 'selected="selected"';?>>Absent</option>
</select>
<div id="back_color">dddd</div>
<script>
$(document).ready(function(){
$('[name="status"]').change(function(){
if ($(this).val() == '1') {
$('#back_color').css('background-color','green');
} else if ($(this).val() == '2') {
$('#back_color').css('background-color','red');
}
}) ;
});
</script>
You can do it with CSS
CSS:
.opt-absent.selected {
background-color: red;
}
.opt-present.selected {
background-color: green;
}
Just echo a class with php with your conditions
<select name="status" class="form-control" style="width:100px;float:left;">
<option value="0" <?php if($status == 0)echo 'selected="selected"';?>></option>
<option value="1" <?php if($status == 1)echo 'selected="selected"';?> class="opt-present <?php if($status == 1)echo 'selected';?>">Present</option>
<option value="2" <?php if($status == 2)echo 'selected="selected"';?> class="opt-absent <?php if($status == 2)echo 'selected';?>">Absent</option>
</select>
Try with jquery -
$('.form-control').on('change', function() {
if ($(this).val() == 1) {
$(this).css('background-color', 'green');
} else if ($(this).val() == 2) {
$(this).css('background-color', 'red');
} else {
$(this).css('background-color', 'white');
}
})
Add the jquery library before applying it.
you can do this way by using only php:
<?php
error_reporting(E_ALL);
$val=$_POST['abprt'];
?>
<html>
<head>
<style type="text/css">
#colorChange
{
padding:20px;
<?php
switch($val)
{
case 'pre':
echo "background-color:green;";
break;
case 'abs':
echo "background-color:red;";
break;
default:
echo "background-color:white;";
}
?>
}
</style>
</head>
<body>
<div id="colorChange">
<form method="post" action="test3.php">
<select name="abprt" >
<option value="pre" >Presnt</option>
<option value="abs">Absent</option>
<input type="submit" name="submit">
</select>
</form>
</div>
</body>
</html>
or trigger submit using js while hiding the submit button..
or you can go for jquery, which will be a bit complicated..
May be this will help you.
<?php if($status == 1): ?>
<select name="status" class="form-control" style="width:100px; float:left;background-color:green;">
<option value="1" selected>Present</option>
<option value="2" >Absent</option>
<?php else: ?>
<select name="status" class="form-control" style="width:100px; float:left;background-color:red;">
<option value="1" >Present</option>
<option value="2" Selected>Absent</option>
<?php endif; ?>
</select>
actually you are setting selected data by getting value from php so everytime when the script loads it have to trigger the change event of the select box so that the latest color automatically get changed here is the snippet for you rest you can use PHP in option to echo selected;
$(document).ready(function() {
$('[name="status"]').trigger('change');
$('[name="status"]').change(function(){
if ($(this).val() == '1') {
$('#back_color').css('background-color','green');
} else if ($(this).val() == '2') {
$('#back_color').css('background-color','red');
}
}) ;
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select name="status" class="form-control" style="width:100px; float:left;">
<option value="0">Select Color</option>
<option value="1" >Present</option>
<option value="2" >Absent</option>
</select>
<div id="back_color">dddd</div>for some reasons i have removed php tags from your code but you can re-insert them now.
Regards
</div>