jQuery addClass on $ .post

Question

Я в основном пытаюсь создать небольшую регистрационную форму. Если имя пользователя уже выполнено, я хочу добавить «красный» класс, если не «зеленый».

PHP здесь отлично работает и возвращает либо «ДА», либо «НЕТ», чтобы определить, нормально ли это.

CSS-:

input { 

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

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

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

Javascript я использую:

$("#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'); 
    } 
    }); 
    } 
}); 

У меня есть document.ready вещи тоже ... Это все прекрасно работает, потому что в #test div html изменяется на «YES» или «NO», кроме последней части, где я проверяю, каково значение данных. Вот 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

попробовать это один

 

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

дайте мне знать, если он работает.

Answer 2

@Jimmy - Изменение класса просто не происходит.

@Gaurav - Используя ваш код, граница меняется, но всегда она установлена ​​в красный цвет, независимо от того, являются ли данные «ДА» или «НЕТ».

Должно быть, это что-то с проверкой данных? Но я не вижу, как ...

Answer 3

Вот пример того, как я думаю, что вы должны реализовать свою функцию. Код в значительной степени самоочевиден, но не стесняйтесь спрашивать, что-то непонятно.

<?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>