I have an input text field below.
<label>User Type</label>
<input name="user_type" id="user_type" class="form-control" readonly/>
I am trying to change the background color of this textbox based on the text inside. The following code helps achieve this functionality after clicking on the box.
if (data.userstatus == 'Active') {
$('#user_status').val(data.userstatus);
$("#user_status").focus(function() {
$(this).addClass("focused");
});
}
else {
$('#user_status').val(data.userstatus);
$("#user_status").blur(function() {
$(this).removeClass("focused");
});
}
Below is the CSS class used for styling.
.focused {
border: solid 1px red;
}
However, I want the red border and background color change to be visible without requiring a click. This textbox is inside a popup window, and I need it to be highlighted in red when the popup is opened.
If anyone can assist me in enhancing my code, I would greatly appreciate it.
update:
Here is the button I use to open the dialog box.
<a type="button" href="#" style="text-decoration-line:none;font-size:15px;" name="edit" id="<?php echo $_SESSION["id"]; ?>" class="btn btn-info btn-xs edit_data"><img src="./assets/images/logo.png" width="45" height="45" style="vertical-align:middle;"/> <?php echo htmlspecialchars($_SESSION["username"]); ?></a>
Here is the ajax part of the script
$(document).ready(function(){
$('#add').click(function(){
$('#insert').val("Insert");
$('#insert_form')[0].reset();
});
$(document).on('click', '.edit_data', function(){
var row_id = $(this).attr("id");
$.ajax({
url:".userdetail.php",
method:"POST",
data:{row_id:row_id},
dataType:"json",
success:function(data){
if(data.userstatus=='Active'){
$('#user_status').val(data.userstatus);
$("#user_status").focus(function(){
$(this).addClass("focused");
});
}
else{
$('#user_status').val(data.userstatus);
$("#user_status").blur(function(){
$(this).removeClass("focused");
});
}
$('#employee_id_return').val(data.row_id);
$('#insert').val("Update");
$('#add_data_Modal').modal('show');
},
error: function(req, status, error) {
alert(req.responseText);
}
});
});