使用Jquery隐藏和显示div无效

时间:2017-03-12 13:44:49

标签: javascript jquery ajax

我已经创建了一个表单和JQuery Ajax处理程序来处理登录 在我的表单下,我创建了一个bootstrap div弹出窗口,告诉“用户名或密码不正确”。我想使用JQuery $().hide()隐藏它,如果用户名和密码不在数据库中,我的Handler脚本将显示div弹出窗口。

这是div弹出

<div id="error" class=" col-sm-3  mx-auto  mt-4 alert alert-danger alert-dismissible fade show" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  Password or username incorrect.
</div>

这是我的JS脚本

$(`div#error`).hide();
//handling login form.
$("#login-form").submit(function(e){
    if($('#user').val() != "" && $('#psw').val() != "" && $('#npsw').val() != "") {
        $.ajax({
           type: "POST",
           url: "login-process.php",
           data: $("#login-form").serialize(),
           success: function(response){
               $('#login-form')[0].reset();
               console.log(response);
               if (response == "True") {
                   window.location.href = "info.php";
               }
               else {
                       $(`div#error`).show();
               }
           }
         });
     }
     else {
         alert("Please fill the fields.")
     }
    e.preventDefault();
});
  

问题:div弹出窗口显示在页面上并且没有隐藏。   当我从关闭按钮手动关闭它时。处理程序没有显示   如果数据不正确,则为div。

1 个答案:

答案 0 :(得分:1)

错误div

的页面加载时将显示设置为无
<div id="error" class=" col-sm-3  mx-auto  mt-4 alert alert-danger alert-dismissible fade show" role="alert" style="display:none">