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;
}