Ashish Sidola
Ashish Sidola

Reputation: 1

how to change the font color in jquery

i want to change the font color of html(username + ' is already exist. Please try another one'); but i don't know how to change this.

function check_availability(){  

    //get the username  
    var username = $('#username').val();  

    //use ajax to run the check  
    $.post("<?php echo base_url();?>loginFunction/checkUsername", { username: username },  
        function(result){  
            //if the result is 1  
            if(result == 1){  
                //show that the username is available  
                $('#username_availability_result').html(username + ' is Available');  
            }else{  
                //show that the username is NOT available  
                $('#username_availability_result').html(username + ' is already exist. Please try another one');  
            }  
    });

Upvotes: 0

Views: 69

Answers (5)

safin chacko
safin chacko

Reputation: 1390

TRY THIS

 function check_availability(){  

        //get the username  
        var username = $('#username').val();  

        //use ajax to run the check  
        $.post("<?php echo base_url();?>loginFunction/checkUsername", { username: username },  
            function(result){  
                //if the result is 1  
                if(result == 1){  
                    //show that the username is available  
                    $('#username_availability_result').html(username + ' is Available');  

    $('#username_availability_result').css({
      'color': 'black'
    });
                }else{  
                    //show that the username is NOT available  
                    $('#username_availability_result').html(username + ' is already exist. Please try another one');  

    $('#username_availability_result').css({
      'color': 'red'
    });
                }  
        });

Upvotes: 0

devpro
devpro

Reputation: 16117

You can also use jQuery attr :

$('#username_availability_result').attr('style','color:red');
$('#username_availability_result').html(username + ' is already exist. Please try another one');  

Upvotes: 0

Aries
Aries

Reputation: 770

You can wrap it up in a span tag.

function check_availability(){  

    //get the username  
    var username = $('#username').val();  

    //use ajax to run the check  
    $.post("<?php echo base_url();?>loginFunction/checkUsername", { username: username },  
        function(result){  
            //if the result is 1  
            if(result == 1){  
                //show that the username is available  
                $('#username_availability_result').html(username + ' is Available');  
            }else{  
                //show that the username is NOT available  
                $('#username_availability_result').html('<span style="color:#f00;">' + username + ' is already exist. Please try another one</span>');
            }  
    });
}

Upvotes: 0

Sougata Bose
Sougata Bose

Reputation: 31749

Try with css -

$('#username_availability_result')
.css('color', 'red')
.html(username + ' is already exist. Please try another one');

Upvotes: 1

Sachin Dongre
Sachin Dongre

Reputation: 25

<script>
$('#username_availability_result').css("color","red");
<script>

Upvotes: 0

Related Questions