Question

使用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");
        }
      }
    });
  });
});

Answer 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并且表单不会被提交

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

    });

    });

Answer 3

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

Answer 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');
        }
    }
    });
});

});

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

}）;

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

5 个答案: