检查用户名和电子邮件是否存在后如何禁用提交按钮答案

【问题标题】：How to disable submit button after checking if username and email exist检查用户名和电子邮件是否存在后如何禁用提交按钮
【发布时间】：2017-10-22 22:17:09
【问题描述】：

使用 AJAX，我正在检查数据库中是否存在电子邮件或用户名。如果两者之一（或两者）存在，我想禁用提交按钮。

现在我设法为输入边框着色，但我被困在禁用按钮的逻辑上。

我使用以下方法禁用提交按钮：

document.getElementById("submit").disabled = true;

我应该在哪里应用什么逻辑来禁用按钮？

$(function() {
  $("#username").on("change", function() {
    var user = document.forms["reg_form"]["username"].value;
    $.ajax({
      type: 'POST',
      url: 'api/checkdata.php',
      data: {user: user},
      dataType: 'json',
      success: function(r) {
        if(r=="1") {
          //Exists
          $("#username").css("border-color", "#ff0000");
        } else {
          //Doesn't exist
          $("#username").css("border-color", "#2cbc21");
        }
      }
    });
  });

  $("#email").on("change", function() {
    var email = document.forms["reg_form"]["email"].value;
    $.ajax({
      type: 'POST',
      url: 'api/checkdata.php',
      data: {email: email},
      dataType: 'json',
      success: function(r) {
        if(r=="1") {
          //Exists
          $("#email").css("border-color", "#ff0000");
        } else {
          //Doesn't exist
          $("#email").css("border-color", "#2cbc21");
        }
      }
    });
  });
});

【问题讨论】：

标签： javascript jquery html ajax

【解决方案1】：

当您从服务器获得用户名或电子邮件存在的结果时，您将禁用提交按钮还有：

$(function () {
  $('#username').on('change', function () {
    var user = document.forms['reg_form']['username'].value;
    $.ajax({
      type: 'POST',
      url: 'api/checkdata.php',
      data: {user: user},
      dataType: 'json',
      success: function (r) {
        if (r == '1') {
          // Exists
          $('#username').css('border-color', '#ff0000');
          $('#submit').addAttr('disabled');
          isValid=false;
        } else{
          // Doesn't exist
          $('#username').css('border-color', '#2cbc21');
          $('#submit').addAttr('disabled');
          isValid=true;
        }
      }
    });
  });

  $('#email').on('change', function () {
    var email = document.forms['reg_form']['email'].value;
    $.ajax({
      type: 'POST',
      url: 'api/checkdata.php',
      data: {email: email},
      dataType: 'json',
      success: function (r) {
        if (r == '1') {
          // Exists
          $('#email').css('border-color', '#ff0000');
          $('#submit').addAttr('disabled');
          isValid=false;
        } else {
          // Doesn't exist
          $('#email').css('border-color', '#2cbc21');
          $('#submit').removeAttr('disabled');
          isValid=true;
        }
      }
    });
  });
});

$("#submit").on('click',function(){
  if (isValid){
    //here you can submit form and both username and email dosenot exists
  }
});

如果电子邮件不存在但用户名存在，则不使用 isValid 变量 isValid 将为 false 并且不会提交表单

【讨论】：

是的，但是当用户名/电子邮件被更改时，它将保持禁用状态。如果在 else 中添加 disabled=false，则会导致其他问题，例如如果用户名无效从而禁用按钮，则当检查电子邮件并且有效时，它会启用按钮，但在用户名仍然存在时启用按钮无效
@Andreas 让我编辑我的答案以在不存在电子邮件或用户名时重新启用按钮
感谢您的编辑。我从下面粘贴我的评论：我已经尝试过了，不幸的是它不起作用。在这种情况下，如果用户名无效，它将按预期禁用按钮。但是，如果用户名没有更改并且电子邮件是正确的，它将启用按钮，因为用户名仍然无效，所以不会出现预期的情况。
@Farhad 欢迎好友:)

【解决方案2】：

您可以使用.attr("disabled", true); 来实现，然后使用$("#submit").removeAttr("disabled"); 启用它试试这个：

        $(function() {

        $("#username").on("change", function() {

            var user = document.forms["reg_form"]["username"].value;

            $.ajax({
                type: 'POST',
                url: 'api/checkdata.php',
                data: {user: user},
                dataType: 'json',
                success: function(r)
                {
                    if(r=="1")
                    {
                        //Exists
                        $("#username").css("border-color", "#ff0000");
                        //disable button using prop
                       $("#submit").attr("disabled", true);
                    }else{
                        //Doesn't exist
                        $("#username").css("border-color", "#2cbc21");
                        // remove disabled
                        $("#submit").removeAttr("disabled");
                    }
                }
            });

        });

        $("#email").on("change", function() {

            var email = document.forms["reg_form"]["email"].value;

            $.ajax({
                type: 'POST',
                url: 'api/checkdata.php',
                data: {email: email},
                dataType: 'json',
                success: function(r)
                {
                    if(r=="1")
                    {
                        //Exists
                        $("#email").css("border-color", "#ff0000");
                         //disable button using prop
                        $("#submit").attr("disabled", true);
                    }else{
                        //Doesn't exist
                        $("#email").css("border-color", "#2cbc21");
                        // remove disabled
                        $("#submit").removeAttr("disabled");
                    }
                }
            });

    });

    });

【讨论】：

【解决方案3】：

如果我正确理解您的问题，您希望在设置禁用样式的同时更改为禁用状态。将这一行放在对 .css() 的调用之前或之后。

【讨论】：

【解决方案4】：

$(function() {

$("#username").on("change", function() {

    var user = document.forms["reg_form"]["username"].value;

    $.ajax({
        type: 'POST',
        url: 'api/checkdata.php',
        data: {user: user},
        dataType: 'json',
        success:function(result){
        if(result != 'false'){
          $('#message').text('Username exists');
          $('#submit').attr('disabled','disabled');
        } else {
          $('#submit').removeAttr('disabled');
        }
    }
    });

});

$("#email").on("change", function() {

    var email = document.forms["reg_form"]["email"].value;

    $.ajax({
        type: 'POST',
        url: 'api/checkdata.php',
        data: {email: email},
        dataType: 'json',
        success:function(result){
        if(result != 'false'){
          $('#message').text('email exists');
          $('#submit').attr('disabled','disabled');
        } else {
          $('#submit').removeAttr('disabled');
        }
    }
    });
});

});

【讨论】：

【解决方案5】：

您可以按如下方式添加按钮禁用启用逻辑。如果用户名或电子邮件存在，则应启用，否则禁用。

$(function() {

$("#username").on("change", function() {

    var user = document.forms["reg_form"]["username"].value;

    $.ajax({
        type: 'POST',
        url: 'api/checkdata.php',
        data: {user: user},
        dataType: 'json',
        success: function(r)
        {
            if(r=="1")
            {
                //Exists
                $("#username").css("border-color", "#ff0000");
                document.getElementById("submit").disabled = true;
            }else{
                //Doesn't exist
                $("#username").css("border-color", "#2cbc21");
                document.getElementById("submit").disabled = false;
            }
        }
    });

});

$("#email").on("change", function() {

    var email = document.forms["reg_form"]["email"].value;

    $.ajax({
        type: 'POST',
        url: 'api/checkdata.php',
        data: {email: email},
        dataType: 'json',
        success: function(r)
        {
            if(r=="1")
            {
                //Exists
                $("#email").css("border-color", "#ff0000");
                document.getElementById("submit").disabled = true;
            }else{
                //Doesn't exist
                $("#email").css("border-color", "#2cbc21");
                document.getElementById("submit").disabled = false;
            }
        }
    });

});

【讨论】：

我已经尝试过了，不幸的是它不起作用。在这种情况下，如果用户名无效，它将按预期禁用按钮。但是，如果用户名没有更改并且电子邮件是正确的，它将启用按钮，因为用户名仍然无效，所以不会出现预期的情况。