更改输入的背景色

Question

I have a code here, and what I want to accomplish is a live checking that when a username exist, the background color of that text input will change. I'm using slim framework by the way and here is what I've accomplished for now:

html and jQuery:

<input type="text" name="txt_un" id="txt_un" />

<script>
$("#txt_un").keyup(function (e) {
   var username = $(this).val();
   $.post('/check/username/availability', {'username':username}, function(data) { 
   $("#user-result").html(data); //this will dump the data received from the php but I just want it to change the color of the input
   });
});
</script>

php route:

$app->get('/check/username/availability', function() use($app) {
    $db = new db();
    $db->setErrorCallbackFunction("myErrorHandler", "text");
    $request = \Slim\Slim::getInstance()->request()->post();
    $app = \Slim\Slim::getInstance();
        $bind = array(
            ":un" => $request['txt_un']
        );
        $result = $db->select("accounts", "username = :un", $bind);
        if(count($result) > 0) {
            //change background color of txt_un
        } else {
            //change background color of txt_un
        }
});

How can I accomplish it using my code? Or is there another way of doing this? Thank you.

Answer 1

You can output color code (#ffffff or red) or some flag in your php script. In JS you can use $(selector).css method.

function Change(color){
    $('.example').css({
        background: color
    });
}

Change('red');

Try: http://jsfiddle.net/x7xm7svr/

About method: http://api.jquery.com/css/

In your case, if the server method return 0 on already exist and 1 on not exist:

$("#txt_41").keyup(function (e) {
   var username = $(this).val();
   $.post('/check/username/availability', {'username':username}, function(data) { 
        if(data=='0')
            { $("#txt_un").css({background: 'red'}); }
        else
            { $("#txt_un").css({background: 'green'}); }
   });
});

Answer 2

I got it working using Roman Kirillov's answer and by changing the route from post to get. Here is the final code:

Route:

$app->post('/check/username/availability', function() use($app) {
    $db = new db();
    $db->setErrorCallbackFunction("myErrorHandler", "text");
    $request = \Slim\Slim::getInstance()->request()->post();
    $app = \Slim\Slim::getInstance();
        $bind = array(
            ":un" => $request['txt_un']
        );
        $result = $db->select("accounts", "username = :un", $bind);
        if(count($result) > 0) {
            echo 1;
        } else {
            echo 2;
        }
});

jQuery:

$("#txt_41").keyup(function (e) {
   var username = $(this).val();
   $.post('/check/username/availability', {'username':username}, function(data) { 
        if(data=='0')
            { $("#txt_41").css({background: 'red'}); }
        else
            { $("#txt_41").css({background: 'green'}); }
   });
});

Thanks for viewing :)