jQuery addClass on $ .post

Question

Je suis en train d'essayer de créer un petit formulaire d'inscription. Si le nom d'utilisateur est déjà pris, je veux ajouter la classe 'red', sinon 'green'.

Le PHP fonctionne bien, et renvoie un "OUI" ou un "NON" pour déterminer si tout va bien.

Le CSS:

input { 

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

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

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

Le Javascript J'utilise est:

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

J'ai les trucs document.ready trop ... Tout fonctionne bien parce que le #test div html se transforme en "OUI" ou "NON", à l'exception de la dernière partie où je vérifie quelle est la valeur des données. Voici le 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

essayez celui-ci

 

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

laissez-moi savoir si cela fonctionne.

Answer 2

@Jimmy - Le changement de classe n'arrive tout simplement pas.

@Gaurav - En utilisant votre code, la bordure change mais elle est toujours définie en rouge, que les données soient "OUI" ou "NON".

Ce doit être quelque chose avec la vérification des données? Mais je ne vois pas comment ...

Answer 3

Voici un exemple de base de la façon dont je pense que vous devriez implémenter votre fonctionnalité. Le code est assez explicite, mais n'hésitez pas à demander si quelque chose n'est pas clair.

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