Question

我有输入字段，用户可以输入用户名。当用户提交用户名时，它将插入mySQL数据库。如果用户名已在数据库中，则ajax会检查它并返回x，如果它不在数据库中，则返回check图标。问题是我需要在ajax返回x时禁用提交按钮。

这是我的代码：

<div id="loginform">
                <form id="login" name="login" method="POST" action="process.php">
                    <div class="col-lg-6">
                        <span>Username:</span><br>
                       <input type="text" id="username" name="username" placeholder="Username" class="required"/>
                        <span id="user-result"></span>

                    </div>
                    <div class="col-lg-6">
                        <span>Password</span><br>        
                        <input type="password" id="password" name="password" placeholder="password" class="required" />
                    </div>
                    <div class="col-lg-12">
                        <span>E-mail:</span><br>
                        <input type="text" id="email" name="email" placeholder="Email" class="required email" />
                        <span id="mail-result"></span>
                    </div>

                    <div class="col-lg-6">     
                        <input id="submit" name="submit" type="submit" value="Send It" />

                    </div>
                </form>
                <div id="response"></div>
                <div id="loading"><img src="../images/preloader.png" alt=""/></div>
            </div>

JS：

 $(document).ready( function() {
$('input[placeholder], textarea[placeholder]').placeholder();
$('#submit').removeAttr('disabled');



$('#login').validate({
    debug: true,
    //submitHandler: ajaxSubmit
            rules: {
                username: {
                    required: true,
                    minlength: 3,
                    maxlength: 255
                },
                password: {
                    required: true,
                                            minlength: 8,
                                            maxlength: 255
                }
            },
            messages: {
                username: "Username field required.",
                password: "Password field required.",
                email: {
                    required: "Email address required",
                    email: "Email address must be in the format name@domain.com."                        
                }


            }

});


$('#submit').click( function() {
    if( $('#login').valid() ) {
            ajaxSubmit();
    }
    else {
        $('label.error').hide().fadeIn('slow');

    }
});




    var username  = $.trim($('#username').val());


$("#username").keyup(function (e) {

    //removes spaces from username
    $(this).val($(this).val().replace(/\s/g, ''));

    var username = $(this).val();
    if(username.length < 4){
                $("#user-result").html('');

                return;
            }

    if(username.length >= 4){
        $("#user-result").html('<img src="images/ajax-loader.gif" />');
        $.post('../check_username.php', {'username':username}, function(data) {
          $("#user-result").html(data);

        });
    }

});;


    $("#email").keyup(function (e) {

    //removes spaces from email
    $(this).val($(this).val().replace(/\s/g, ''));

    var email = $(this).val();
    if(email.length < 4){
                $("#mail-result").html('');

                return;
            }

    if(email.length >= 4){
        $("#mail-result").html('<img src="images/ajax-loader.gif" />');
        $.post('../check_username.php', {'email':email}, function(data) {
          $("#mail-result").html(data);

        });
    }
});;


$(document).ajaxStart(function() {
$("#submit").prop('disabled', true);
}).ajaxStop(function() {
$("#submit").prop('disabled', false);
});













});




function ajaxSubmit() {
$('#loading').show();
$('#submit').attr('disabled', 'disabled');
var username = $('#username').val();
var password = $('#password').val();
var email = $('#email').val();

var data = 'username=' +username+ '&password=' +password+ '&email=' +email;

$.ajax({
    url: '../process.php',
    type: 'get',
    dataType: 'json',
    data: data,
    cache: false,
    success: function(response) {
        if( response.error != 'true' ) {
            $('#loading, #login, .message').fadeOut('slow');
            $('#response').html('<h3>Records added successfully.</h3>').fadeIn('slow');
        }
        else {
                $('#loading').fadeOut('slow');
                $('#submit').attr('disabled', 'disabled');
                $('#response').html('<h3>Could not able to execute sql</h3>').fadeIn('slow');
        }
    },
    error: function(jqXHR, textStatus, errorThrown) {
                            $('#loading').fadeOut('slow');
            $('#submit').removeAttr('disabled');
            $('#response').text('Error Thrown: ' +errorThrown+ '<br>jqXHR: ' +jqXHR+ '<br>textStatus: ' +textStatus ).show();
    }
});
return false;
}

PHP：

<?php

// Connect to database
include 'includes/database.php';

 //check we have username post var
if(isset($_POST["username"]))
{
//try connect to db
include 'includes/database.php';


//sanitize username
    $username = mysqli_real_escape_string($link, $_POST['username']);

//check username in db
$results = mysqli_query($link,"SELECT * FROM users WHERE username='$username'");

//return total count
$username_exist = mysqli_num_rows($results); //total records

//if value is more than 0, username is not available
if($username_exist) {


    die('<img src="images/not-available.png" />');

}else{
    die('<img src="images/available.png" />');

}
    }
    if(isset($_POST["email"]))
    {
    //sanitize mail
    $email = mysqli_real_escape_string($link, $_POST['email']);

//check mail in db
$results_mail = mysqli_query($link,"SELECT * FROM users WHERE email='$email'");

//return total count
$email_exist = mysqli_num_rows($results_mail); //total records

//if value is more than 0, mail is not available
if($email_exist) {
    die('<img src="images/not-available.png" />');

}else{
    die('<img src="images/available.png" />');

}

//close db connection
mysqli_close($link);
    }

编辑：

    if(username.length >= 4){
        $("#user-result").html('<img src="images/ajax-loader.gif" />');
        $.post('../check_username.php', {'username':username}, function(data) {
                        console.log(data);
                        if (data == 'No' ){
                           $("#submit").prop('disabled', true);
          $('#user-result').html('<img src="images/not-available.png" />')

                    }else{
                        $("#submit").prop('disabled', false);
          $('#user-result').html('<img src="images/available.png" />')
                    }

        });
    }

如果使用了用户名但我无法取消按钮

，我会收到图片

这是我的PHP

//check we have username post var
if(isset($_POST["username"]))
{
//try connect to db
include 'includes/database.php';


//sanitize username
    $username = mysqli_real_escape_string($link, $_POST['username']);

//check username in db
$results = mysqli_query($link,"SELECT * FROM users WHERE username='$username'");

//return total count
$username_exist = mysqli_num_rows($results); //total records

//if value is more than 0, username is not available
if($username_exist) {

echo'No';
    //die('<img src="images/not-available.png" />');

}else{
    //die('<img src="images/available.png" />');
            echo'Yes';
}
    }

Answer 1

我把它添加到我的js：

if(username.length >= 1){
        $("#user-result").html('<img src="images/ajax-loader.gif" />');
        $.post('../check_username.php', {'username':username}, function(data) {
                       // console.log(data);
                        if (data == 'No' ){
                          $("#submit").prop('disabled', true);
          $('#user-result').html('<img src="images/not-available.png" />')

                    }else{
                       $("#submit").prop('disabled', false);
          $('#user-result').html('<img src="images/available.png" />')
                    }

        });
    }

这是php：

  if($username_exist) {

echo'No';


}else{

            echo'Yes';
}

那解决了问题

感谢大家的帮助

Answer 2

我创建了这个JSFiddle示例以禁用带有Jquery的按钮：

$('#submit').prop('disabled', true);

Disable a button example

当输入字段中的值已在数据库中时，禁用提交按钮

2 个答案: