How to make background of a textbox with a if condition-CodePudding

I have below input text field.

<label>User Type</label>
<input name="user_type" id="user_type"  readonly/>

I need to change the background color of this textbox according to the text. From below code, I could get this done 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");
  });
}

Here is my CSS class.

.focused {
  border: solid 1px red;
}

But I need to show the red color border without clicking. Further I need to change the background also to red color.

This textbox is inside a popup window. I need when someone opens the popup, to show red highligheted.

Can someone help me to improve my code?

update:

Here is the button which 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"]; ?>"    > <img src="./assets/images/logo.png" width="45" height="45" style="vertical-align:middle;"/> <?php echo htmlspecialchars($_SESSION["username"]); ?></a>

Here is the ajax class

$(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);      
                }   
           });  
      });

CodePudding user response：

Set focus after the modal opened.

$( "#user_status" ).focus();

CodePudding user response：

I assume you would like to modify CSS for this control:

#user_type {
    border: solid 1px red;
}

#user_type.focused {
    background: red;
}