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

Question

我一直在尝试在 AJAX 请求成功后启用 提交按钮。验证在具有以下代码的 PHP 文件中

    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>";
        }
    }

这就是 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 (){}
        });
    }

我用过这是成功它的作用是禁用提交按钮，即使数据与请求匹配，按钮保持禁用状态

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

并跟随错误

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

我已经解决了这些问题并尝试了解决方案，但这些解决方案对我来说并不奏效。

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

Disable Button while AJAX Request

这是 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>

提前致谢！

Answer 1

在成功事件上，您需要将disabled 属性值设置为false。这将重新启用按钮

$( "#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 (){}
    });

编辑：根据 cmets，

看起来您正在尝试根据您对数据库表进行的检查来启用/禁用按钮。目前您的 php 脚本正在返回一个人类可读的字符串。也许您可以更改您的 php 脚本以返回您的 javascript 代码可以使用的标志值。

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

然后在您的成功处理程序中检查此值并隐藏/显示按钮/消息

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);

},

我不是 PHP 人。可能有一种方法可以从您的 PHP 页面返回 JSON 结构，它可以返回标志和您希望在消息 div 中显示的消息。你也可以试试。

Answer 2

成功后使用：

$("#submit").removeAttr("disabled");

而不是

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

要再次启用按钮，您需要完全删除disabled 属性。