Question

我已经构建了一个登录系统，当有人输入错误的用户名或错误的密码时，我想弹出一个UI对话框。单击提交按钮时弹出窗口，但出于某些原因，我目前还不知道，我的对话框无法打开，我自动重定向到空白页面。

这是我的代码：

if($count == 1){
$_SESSION['username'] = "username";
$_SESSION['password'] = "password";

header("Location:login_success.php");
}else{

?>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script>
    $("#submit").click(function(){
        $("#popup").dialog({
            autoOpen: false,
            modal: true,
            height: 300,
            width: 300,
            title: "Error",
            buttons: {
                'OK': function(){
                    $(this).dialog("close");
                }   
            }
        });

    });

    $('#submit').click();

</script>

<?php
}
?>

完整的HTML表单

<!DOCTYPE html>
<html>
<head>
  <title>Sign In</title>
  <link rel="stylesheet" href="css/SignIn.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>

  <form action="includes/check_login.php" method="post">
    <p>
        <label for="username">Username</label>
        <input id="username" name="username" type="text">
        <span>Username cannot be empty</span>
    </p>
    <p>
        <label for="password">Password</label>
        <input id="password" name="password" type="password">
        <span>Password cannot be empty</span>
    </p>
    <p>
        <input type="submit" value="LOG IN" id="submit">
    </p>
    <p id="account">
        No account ? Please <a href="signUp.html">Sign Up!</a><br><br>
        <a href="ForgotPassword.html">Forgot password ?</a>
    </p>
</form>

<div id="popup" style="display: none">
    <p>Wrong username or password</p>
</div>

<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/SignIn.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

Answer 1

您必须使用ajax。否则它总是重定向，你无法打开弹出窗口。

$(document).ready(function() {

    $('#submit').click(function() {
        $.ajax({
            type: "POST",
            url: 'includes/check_login.php',
            data: {
                username: $("#username").val(),
                password: $("#password").val()
            },
            success: function(data)
            {
                if (data.Success) {
                    //if success 
                     window.location.replace('admin/admin.php');
                }
                else {
                    //in valid username/password so open popup
                     $("#popup").dialog({
                            autoOpen: false,
                            modal: true,
                            height: 300,
                            width: 300,
                            title: "Error",
                            buttons: {
                           'OK': function(){
                            $(this).dialog("close");
                           }   
                          }
                     });
                }
            }
        });

    });

});

Answer 2

尝试在以下位置更改提交事件的开头：

$("#submit").click(function(e){
        e.preventDefault();  // this will avoid form submit on error
        $("#popup").dialog({

此外，您没有看到拨号盘，因为您需要将autopen属性更改为：

autoOpen: true,

将autoOpen设置为false，要打开对话框，您需要再打一次电话：

$("#popup").dialog('open');

完整代码：

$("#submit").click(function(e){
  e.preventDefault();
  $("#popup").dialog({
    autoOpen: true,
    modal: true,
    height: 300,
    width: 300,
    title: "Error",
    buttons: {
      'OK': function(){
        $(this).dialog("close");
      }
    }
  });

<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>


<form action="http://www.google.com">
  <p>
    <input type="submit" value="LOG IN" id="submit">
  </p>
</form>
<div id="popup" style="display: none">
  <p>Wrong username or password</p>
</div>

Answer 3

您尝试在提交按钮为clicked时弹出一个对话框，但您只是声明 WHEN 提示被点击以显示弹出窗口，您没有调用它，请尝试添加以下内容：

$('#submit').click();

Answer 4

这对我有用!!

在提交处理程序函数的末尾添加if Label1.Top < -Label1.Height then Label1.Top := ClientHeight。 return false;同时适用于return false;和e.preventDefault。（参考：event.preventDefault() vs. return false）

同时将行更改为e.stopPropagation

$("#popup").dialog('open');

完整代码段

    $("#submit").click(function(e){

        $("#popup").dialog({
            autoOpen: false,
            modal: true,
            height: 300,
            width: 300,
            title: "Error",
            buttons: {
                'OK': function(){
                    $(this).dialog("close");
                }   
            }
        });

        $("#popup").dialog('open');

        return false;
    });

从php打开时，jQuery UI对话框不可见

4 个答案: