在AJAX中成功后重新启用“提交”按钮

Question

I have been trying to enable Submit Button after the AJAX Request success. The validation is in PHP file which has following code

    if(!empty($_POST["username"])) {

        $fetch = "SELECT * FROM student WHERE std_username='" . $_POST["username"] . "'";
        $result = mysqli_query($con, $fetch);
        $user_count = mysqli_num_rows($result);

        if($user_count>0) {
            echo "<span class='status-not-available'> Username Not Available.</span>";
        }else{
            echo "<span class='status-available'> Username Available.</span>";
        }
    }

and this is AJAX

    function checkAvailability() {
        $("#loaderIcon").show();
        jQuery.ajax({
        url: "check_availability.php",
        data:'username='+$("#username").val(),
        type: "POST",
        success:function(data){
            $("#user-availability-status").html(data);
            $("#loaderIcon").hide();
        },
        error:function (){}
        });
    }

I have used this is success what it does is disable the submit button even the data matches the request or not, the button stays disabled

    $("#submit").attr("disabled", true);

and following in error

    $("#submit").attr("disabled", false);

I have gone throught these questions and tried the solutions but those solutions didn't work out for me.

jQuery: Re-enabling disabled input buttons after 'success:' is run and

Disable Button while AJAX Request

this is the HTML

    <form method="POST">
        <label>Check Username:</label>
        <input name="username" type="text" id="username" class="demoInputBox" onBlur="checkAvailability()"><span id="user-availability-status"></span><br>    
        <label>Check Username:</label>
        <input name="email" type="text" id="email" class="demoInputBox" onBlur="checkAvailabilitye()"><span id="email-availability-status"></span> <br>
        <input type="submit" id="submit"> 
    </form>

Thanks in advance!

Answer 1

on the success event, you need to set the disabled property value to false. This will re-enable the button

$( "#submit" ).prop( "disabled", true ); //disable when ajax call starts

jQuery.ajax({
    url: "check_availability.php",
    data:'username='+$("#username").val(),
    type: "POST",
    success:function(data){
        $( "#submit" ).prop( "disabled", false ); //enable it back
        $("#user-availability-status").html(data);
        $("#loaderIcon").hide();
    },
    error:function (){}
    });

EDIT : As per the comments,

Looks like you are trying to enable/disable button based on the check you are doing aginist the db table. Currently your php script is returning a human readable string. May be you can change your php script to return a flag value which your javascript code can use.

if($user_count>0) {
        echo "no";
}else{
        echo "available";
}

And in your success handler inspect this value and hide/show buttons/messages

success:function(data){
        $("#loaderIcon").hide();
        var msg="Not available";

        if(data=="available")
        {
          $( "#submit" ).prop( "disabled", false ); //enable it back
          msg="Username available";
        }
        $("#user-availability-status").html(msg);

},

I am not a PHP person. There could be a way to return JSON structure from your PHP page which can return both the flag and the message you want to show in the message div. You may try that too.