使用jQuery启用/禁用基于vars的按钮 [英] Use jQuery to Enable/Disable a Button based on vars
问题描述
好吧,我在注册前使用jQuery进行用户名和电子邮件检查...
这将根据php的响应设置变量true或false.
$(document).ready(function() {
if (usr_checked == true) {
if (em_checked == true) {
$("#registerbttn").removeAttr("disabled");
}
}
else {
$("#registerbttn").attr("disabled", "disabled");
}
});
我如何准确地观看这些变量?
谢谢:D 以下代码是设置功能的代码集之一
pic1 = new Image(16, 16);
pic1.src = "loader.gif";
$(document).ready(function(){
$("#username").change(function() {
var usr = $("#username").val();
if(usr.length >= 3)
{
$("#unstatus").html('<img src="loader.gif" align="absmiddle"> Checking availability...');
$.ajax({
type: "POST",
url: "check.php",
data: "username="+ usr,
success: function(msg){
$("#unstatus").ajaxComplete(function(event, request, settings){
if(msg == 'OK')
{
$("#username").removeClass('object_error'); // if necessary
$("#username").addClass("object_ok");
$(this).html(' <img src="accepted.png" align="absmiddle"> <font color="Green"> Available </font> ');
$("#registerbttn").removeAttr("disabled");
var usr_checked = true;
}
else
{
$("#username").removeClass('object_ok'); // if necessary
$("#username").addClass("object_error");
$("#registerbttn").attr("disabled", "disabled");
$(this).html(msg);
var usr_checked = false;
}
});
}
});
}
else
{
$("#status").html('<font color="red">The username should have at least <strong>3</strong> characters.</font>');
$("#username").removeClass('object_ok'); // if necessary
$("#username").addClass("object_error");
$("#registerbttn").attr("disabled", "disabled");
var usr_checked = false;
}
});
});
我认为如果您不依赖变量而是使用自定义事件会更好.例如,您可以创建并绑定到一个自定义事件,该事件将在您的Ajax检查器完成时触发.这是一个示例代码,显示了它是如何工作的:
// on $(document).ready
$('#username')
// bind to a custom event triggered when validation of username succeeded
.bind('checkValid', function() {
alert('enabling the button');
$('#registerbttn').removeAttr('disabled');
})
// bind to a custom event triggered when validation of username failed
.bind('checkFailed', function() {
alert('disabling the button');
$('#registerbttn').attr('disabled', 'disabled');
});
// In your ajax handlers (i.e. $("#unstatus").ajaxComplete),
// if username was valid, trigger the valid event.
// This will call the checkValid handle we declared above and
// enable the button
$('#username').trigger('checkValid');
// If the username check failed though, trigger checkFailed instead
// which will call the handler above which disables the button
$('#username').trigger('checkFailed');
这里是在这里工作的示例: http://jsfiddle.net/wU8vY/ >
Ok so, Im using jQuery to do username and email checks before a signup...
this sets a variable true or false depending on the response from php.
$(document).ready(function() {
if (usr_checked == true) {
if (em_checked == true) {
$("#registerbttn").removeAttr("disabled");
}
}
else {
$("#registerbttn").attr("disabled", "disabled");
}
});
How exactly do i get it to watch those variables live?
Thanks :D The Code below is one of the sets of code that sets the functions
pic1 = new Image(16, 16);
pic1.src = "loader.gif";
$(document).ready(function(){
$("#username").change(function() {
var usr = $("#username").val();
if(usr.length >= 3)
{
$("#unstatus").html('<img src="loader.gif" align="absmiddle"> Checking availability...');
$.ajax({
type: "POST",
url: "check.php",
data: "username="+ usr,
success: function(msg){
$("#unstatus").ajaxComplete(function(event, request, settings){
if(msg == 'OK')
{
$("#username").removeClass('object_error'); // if necessary
$("#username").addClass("object_ok");
$(this).html(' <img src="accepted.png" align="absmiddle"> <font color="Green"> Available </font> ');
$("#registerbttn").removeAttr("disabled");
var usr_checked = true;
}
else
{
$("#username").removeClass('object_ok'); // if necessary
$("#username").addClass("object_error");
$("#registerbttn").attr("disabled", "disabled");
$(this).html(msg);
var usr_checked = false;
}
});
}
});
}
else
{
$("#status").html('<font color="red">The username should have at least <strong>3</strong> characters.</font>');
$("#username").removeClass('object_ok'); // if necessary
$("#username").addClass("object_error");
$("#registerbttn").attr("disabled", "disabled");
var usr_checked = false;
}
});
});
I think it's better if you don't rely on variables and use custom events instead. For example, you can create and bind to a custom event which gets triggered when your ajax checker finishes. Here's a sample code which shows how this could work:
// on $(document).ready
$('#username')
// bind to a custom event triggered when validation of username succeeded
.bind('checkValid', function() {
alert('enabling the button');
$('#registerbttn').removeAttr('disabled');
})
// bind to a custom event triggered when validation of username failed
.bind('checkFailed', function() {
alert('disabling the button');
$('#registerbttn').attr('disabled', 'disabled');
});
// In your ajax handlers (i.e. $("#unstatus").ajaxComplete),
// if username was valid, trigger the valid event.
// This will call the checkValid handle we declared above and
// enable the button
$('#username').trigger('checkValid');
// If the username check failed though, trigger checkFailed instead
// which will call the handler above which disables the button
$('#username').trigger('checkFailed');
Here's a sample of it working here: http://jsfiddle.net/wU8vY/
这篇关于使用jQuery启用/禁用基于vars的按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!