Solution 1 :

You can check in ajax success function what data is been recevied using if-else and depending on that just change your div color .

Your success function will look like below :

var datas =$.trim(response);//remove any whitespaces
if (datas == "This username already in use") {
//add class 
$("#uname_response").toggleClass("color-red")
  $("#uname_response").html(response);
} else {
//add class
$("#uname_response").toggleClass("color-blue")
  $("#uname_response").html(response);
}

Demo Code :

//suppose this is been received
var response = "This username already in use";
var datas =$.trim(response);//remove any whitespaces
if (datas == "This username already in use") {
//add class 
$("#uname_response").toggleClass("color-red")
  $("#uname_response").html(response);
} else {
//add class
$("#uname_response").toggleClass("color-blue")
  $("#uname_response").html("something");
}
.color-red {
  color: red;
}

.color-blue {
  color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="uname_response" ></div>

Problem :

We have one input and this input have 2 validation. First is checking user input is alphanumeric characters or not and the second is username already in use or not.

I want to show if first validation trigger it the html element must be in blue color and the second trigger it it must be in red color.

Errors data coming from PHP by the way. I have 2 variables in PHP these are for showing errors. But in Javascript can’t imaginated it what am I supposed to do.

Here is Php:

<?php

if(isset($_POST['username'])){
    //username validation
    $username = $_POST['username'];

    if (! $user->isValidUsername($username)){
        $infoun = 'Your username must be at least 3 alphanumeric characters';
        echo $infoun;
    } else {
        $stmt = $db->prepare('SELECT username FROM members WHERE username = :username');
        $stmt->execute(array(':username' => $username));
        $row = $stmt->fetch(PDO::FETCH_ASSOC);

        if (! empty($row['username'])){
            $errorun = 'This username already in use';
            echo $errorun;
        }
    }
}
?>

Here is Javascript and Html form:

<script type="text/javascript">
    $(document).ready(function(){               
        
        $("#username").keyup(function(event){
            event.preventDefault();
            var username = $(this).val().trim();
            if(username.length >= 1){
                $.ajax({
                    url: 'registercontrol.php',
                    type: 'POST',
                    data: {username:username},
                    success: function(response){
                    // Show response
                    $("#uname_response").html(response);
                    }
                });
            }else{
                $("#uname_response").html("");
            }
        });         

    });
</script>

<form id="register-form" class="user" role="form" method="post" action="registercontrol.php" autocomplete="off">

<input type="text" name="username" id="username" class="form-control form-control-user" placeholder="Your username" value="<?php if(isset($error)){ echo htmlspecialchars($_POST['username'], ENT_QUOTES); } ?>" tabindex="2" required>

<!-- How to change div class based on php variables?  -->
<div id="uname_response" class="color-red"></div>

</form>

Comments

Comment posted by Ulrich

Thanks for your answers and it’s a working solution too but I missed something. Ajax will response print whatever we give the php echo. So why we say to php:

Comment posted by Swati

yes that was also one solution 🙂 .Sorry i was not knowing you already got solution to your problem

Comment posted by Ulrich

Well actually after your answer i got an idea for that.

By

Leave a Reply

Your email address will not be published. Required fields are marked *