Question

我的表单包含用户名和电子邮件以及发送按钮，我使用Jquery显示用户名和电子邮件的可用性：

$(document).ready(function(){
$("#username").keyup(function(){
    var username = $("#username").val();
    if(username.length >= 3){
        $.post("username_check.php", {username: username},
        function(data){
        $("#status").html(data).show();
        });
    }
});

$("#email").keyup(function(){
    var email = $("#email").val();
    if(email.length >= 3){
        $.post("email_check.php", {email: email},
        function(data2){
        $("#status2").html(data2).show();
        });
    }
});
});

发送按钮被禁用，如果电子邮件和用户名都可用，我想显示它我怎样才能做到这一点？ username_check.php页面：

$username =$_POST['username']; 
$username = strip_tags($username);
$username = trim($username);
$username =  mysqli_real_escape_string($con,$username);
$sql="SELECT * FROM users WHERE username='$username' ";
$result=mysqli_query($berikane,$sql);
$count=mysqli_num_rows($result);     
if($count==1 ){
    echo "Not Available";
     }
else {
    echo "Available";
    }?>

email_check.php页面：

$email =$_POST['email']; 
$email = strip_tags($email);
$email = trim($email);
$email =  mysqli_real_escape_string($con,$email);
$sql="SELECT * FROM users WHERE email='$email' ";
$result=mysqli_query($berikane,$sql);
$count=mysqli_num_rows($result);           
if($count==1 ){
    echo "Not Available";
    }
else {
   echo "Available";
   }?>

Answer 1

可能是这样的。我不知道按钮的选择器，所以我在那里放了一个虚拟选择器。

$(document).ready(function() {
  //cache the variables
  var $username = $('#username');
  var $email = $('#email');
  var $submitButton = $('selectorForTheSubmitButton');
  var usernameIsValid = false;
  var emailIsValid = false;

  //input happens any time the value changes, including pasting
  $username.on('input', function() {
    //disable the button, the value may be taken
    $submitButton.prop('disabled', true);
    //trim the username
    var username = $username.val().trim();

    if (username.length >= 3) {
      $.post("username_check.php", {
          username: username
        },
        function(data) {
          $("#status").html(data).show();
          //Available is the good case
          usernameIsValid = (data === 'Available');
          //Update the button disabled
          $submitButton.prop('disabled', !(usernameIsValid && emailIsValid));
        });
    }
  });

  $email.on('input', function() {
    $submitButton.prop('disabled', true);

    var email = $email.val().trim();

    if (email.length >= 3) {
      $.post("email_check.php", {
          email: email
        },
        function(data2) {
          $("#status2").html(data2).show();
          emailIsValid = (data === 'Available');
          //Update the button disabled
          $submitButton.prop('disabled', !(usernameIsValid && emailIsValid));
        });
    }
  });
});

Answer 2

检查一下，migth比为属性赋值更好：removeProp 更新代码如：

 function(data2) {
      $("#status2").html(data2).show();
      //emailIsValid = (data === 'Available');
      emailIsValid = (data2 === 'Available');
      //Update the button disabled
      if (usernameIsValid && emailIsValid) {
          $submitButton.removeProp('disabled');
      }else{
          $submitButton.prop('disabled', true);  
      }
    });

如果用户名和电子邮件都可用，如何显示按钮

2 个答案: