jQuery addClass上$ .post

我基本上正在尝试创建一个小的注册表单。如果用户名已被占用，我想添加'红色'类，如果不是，那么'绿色'。

这里的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更改为“是”或“否”，除了最后一部分我检查数据的价值是什么。这里是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"; 
    } 
}

来源

2010-03-18 Tim

您是否收到任何类型的JavaScript错误或类更改是不是发生？ – 2010-03-18 08:14:27

现在你的问题到底是什么？ – 2010-03-18 08:47:22

是的，请澄清问题。 “一切正常”......所以怎么了？ – VolkerK 2010-03-18 08:58:20

试试这个

 

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

让我知道如果它的工作原理。

来源

2010-03-18 08:48:27

@Jimmy - 班级变化不会发生。

@Gaurav - 使用你的代码，边界会改变，但它总是被设置为红色，无论数据是“YES”还是“NO”。

它必须是检查数据的东西？但我不知道如何...

来源

2010-03-18 09:14:16 Tim

你应该更新你的问题，而不是回答它。 – 2010-03-18 09:17:48

谢谢 - 我意识到这一点，但我没有一个帐户，直到2秒前，并自发布后改变了电脑.. :) – Tim 2010-03-18 09:23:53

这意味着数据中包含一个否。你可以通过添加一个JavaScript警报来查看哪个循环正在执行。 – 2010-03-18 12:49:59

这是一个基本的例子，我认为你应该实现你的功能。代码几乎不言自明，但随时问问是否有什么不清楚的地方。

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

来源

2010-03-18 09:26:10

jQuery addClass上$ .post

回答

相关问题