jQuery addClass on $.post

Question

I am basically trying to create a small registration form. If the username is already taken, I want to add the 'red' class, if not then 'green'.

The PHP here works fine, and returns either a "YES" or "NO" to determine whether it's ok.

The CSS:

input {

 border:1px solid #ccc;
}
.red {

 border:1px solid #c00;
}
.green {

 border:1px solid green;
 background:#afdfaf;
}

The Javascript I'm using is:

 $("#username").change(function() { 

             var value = $("#username").val();

  if(value!= '') {
   $.post("check.php", {
    value: value
   }, function(data){

   $("#test").html(data);

    if(data=='YES') {
     $("#username").removeClass('red').addClass('green');
    } if(data=='NO') {
     $("#username").removeClass('green').addClass('red');
    }
   });
  }  
 });

I've got the document.ready stuff too... It all works fine because the #test div html changes to either "YES" or "NO", apart from the last part where I check what the value of the data is. Here is the php:

 $value=$_POST['value'];

 if ($value!="") {
  $sql="select * FROM users WHERE username='".$value."'";
  $query = mysql_query($sql) or die ("Could not match data because ".mysql_error());
  $num_rows = mysql_num_rows($query);

  if ($num_rows > 0) {
   echo "NO";
  } else {
   echo "YES";
  }
 }

Answer 1

try this one

if(data=='YES') 
  {
     $("#username").attr('style','').attr('style', 'border:1px solid green;background:#afdfaf;');
  } 
else
  {
     $("#username").attr('style','').attr('style', 'border:1px solid #c00;');
  }

let me know if it works.

Answer 2

@Jimmy - The class change just doesn't happen.

@Gaurav - Using your code, the border changes but it's always set to red, whether the data is "YES" or "NO".

It must be something with checking the data? But I don't see how...

Answer 3

Here's a basic example of how I think you should implement your feature. The code is pretty much self-explanatory, but feel free to ask if anything's unclear.

<?php
function readArray( $arr, $key, $default ='' ) { return isset($arr[$key]) ? $arr[$key] : $default ; }
function error( $message ){ echo "{ result: false, message: \"$message\" }"; exit; }
function success( $isFound ){ echo "{ result: true, exists: " . ($isFound?'true':'false') . "}" ; exit; }

if( sizeof( $_POST ) ) {
    $value = readArray( $_POST, "value", false ) ;
    if( false === $value ) error( "Empty username" ) ;

    @$db = mysql_connect("localhost","root","") ;
    if( !$db ) error( "Can't connect to database" ) ;

    @$result = mysql_select_db( "mysql" ) ;
    if( !$result ) error( "Can't select database" ) ;

    $query = "SELECT COUNT(User) as count FROM user WHERE User='" . mysql_real_escape_string( $value ) . "'";
    @$result = mysql_query( $query ) ;
    if( !$result ) error( "Can't execute query: " . mysql_error() ) ;

    success( readArray( mysql_fetch_assoc( $result ), "count" ) > 0 ) ;
}
?>
<script src="jquery.js" />
<style><![CDATA[
input {
    border:1px solid #ccc;
}
input.red {
    border:1px solid #c00;
}
input.green {
    border:1px solid #0c0;
}
]]></style>

<script>
$(document).ready(function(){
    var updateStyle = function() {
        var value = $("#username").val() ;
        if( !value ) return ;
        $.post("", {
            value: value
        }, function(data){
            var obj = eval( "(" + data + ")" ) ;
            if( obj.result ) {
                if( obj.exists ) {
                    $("#username").addClass('red');
                    $("#test").html( "User already exists" ) ;
                } else {
                    $("#username").addClass('green');
                    $("#test").html( "Username available" ) ;
                }
            } else {
                $("#test").html( obj.message ) ;
            }
        });
    }

    var timeout ;
    $("#username").keydown(function() {
        $("#test").html("") ;
        $("#username").attr("class", "") ;
        clearTimeout( timeout ) ;
        timeout = setTimeout( updateStyle, 500 ) ;
    });
});
</script>

<input id="username" name="username" value="" />
<div id="test"></div>