Question

我想做的是使用模式对话框从bootstrap 3创建一个登录系统，使用javascript显示和隐藏表单。用户成功登录后，将使用javascript代码重定向到Profile form。我的问题是在我点击登录按钮后，模态对话框消失，没有任何反应。

脚本：

<script type="text/javascript">
$(document).ready(function() {

   $('#myLogin').submit(function() {
        var email = $('#email').val();
        var password = $('#pass').val();    

        $.ajax({
            data: {
             email : email, password : password
            },
            type: "POST",
            url: 'user.php',
            success: function(data)
            {
               $('#show').html(data);
               $(".show-page[data-page=Profile]").trigger("click");
            }
        });
            return false;
    });

});
</script>

<script type="text/javascript">
$(document).ready(function(){

    if(typeof(Storage)!=="undefined" && localStorage.getItem('pageToShow')) {
        var pageToShow = localStorage.getItem('pageToShow');
         $('.page').addClass('hide');
         $('.' + pageToShow).removeClass('hide');
    }
    $('.show-page').click(function(){
        var pageToShow = $(this).data('page');
         $('.page').addClass('hide');
         $('.' + pageToShow).removeClass('hide');
        if(typeof(Storage)!=="undefined") {
            localStorage.setItem('pageToShow', pageToShow);
        }

    $('.modal-btn').click(function() {
        $('.modal').modal('hide');
    });
});  
</script>

的index.php

<body>
<form method="post" id="elogForm" action="index.php">
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <ul class="nav navbar-nav navbar-left">
                <li><a data-toggle="modal" href="#myModal"><span class="glyphicon glyphicon-user"></span> Login</a></li>
            </ul>
        </div>
    </div>
</nav>
        <div class="container"  id="myLogin">
            <div class="row">
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                    <h5 class="modal-title">PLEASE ENTER YOUR EMAIL ADDRESS AND PASSWORD TO LOG IN.</h5>    
                                    <div id="show"></div>                                   
                                </div>
                                <div class="modal-body">
                                    <div class="form-horizontal">       
                                        <div class="form-group">
                                            <label for="email" class="col-sm-2 control-label">Email</label>
                                            <div class="col-md-9">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
                                                    <input type="email" id="lemail" name="email" value="<?php echo $unm ?>" class="form-control" placeholder="Enter Email Address..." required="required" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="password" class="col-sm-2 control-label">Password</label>
                                            <div class="col-md-9">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
                                                    <input type="password" id="lpassword" name="password" value="<?php echo $pwd ?>" class="form-control" placeholder="Enter Password..." required="required" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-offset-2 col-sm-10">
                                                <input type="checkbox" name="chkbox" value="staylogged" class="checkbox-inline" />
                                                <label>  &nbsp; Keep me logged in</label>  &nbsp; <b>|</b>
                                                <a href="" style="text-decoration:none">  &nbsp; Forgot your password?</a>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-offset-2 col-sm-10">
                                                <button type="submit" id="login" name="login" class="btn btn-primary show-page"  data-page="Profile"><span class="glyphicon glyphicon-user"></span> Login</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
        </div>

<div class="container">
        <div class="page Home">
            <div class="row">
                <center>    
                    <h1>"Home"</h1>
                </center>
             </div>
        </div>
        <div class="page Profile hide">
            <div class="row">
                <center>
                    <h1>"Profile"</h1>
                </center>
            </div>
        </div>
</div>  
</form>
</body>

user.php的

<?php
include_once('connection.php');

$db = new Connection();
$db = $db->dbConnect();

$email = $_POST['email'];
$pass = $_POST['password'];

    if(!empty($email) && !empty($pass)){
        $st = $db->prepare("SELECT * from user WHERE email=? AND password=?");
        $st->bindParam(1, $email);
        $st->bindParam(2, $pass);
        $st->execute();

        if($st->rowCount() == 1){
            echo "Email verifies, Access granted";
        } else {
            echo "Incorrect Email or Password";
        }
    }else{
        echo "Please enter Email and Password";
    }  
?>

Answer 1

这可以在底部找到你可以阅读的问题：

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="">

    <title>Modal Login</title>

    <!-- Core CSS -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style>
        h1 {
            text-align: center; 
        }
    </style>
 </head>
<body>
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <ul class="nav navbar-nav navbar-left">
                <li><a data-toggle="modal" href="#myModal"><span class="glyphicon glyphicon-user"></span> Login</a></li>
            </ul>
        </div>
    </nav>
    <div class="container" id="myLogin">
        <div class="row">
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h5 class="modal-title">PLEASE ENTER YOUR EMAIL ADDRESS AND PASSWORD TO LOG IN.</h5>    
                            <div id="show"></div>                                   
                        </div>
                        <div class="modal-body">
                            <form method="post" id="elogForm">
                                <div class="form-horizontal">       
                                    <div class="form-group">
                                        <label for="email" class="col-sm-2 control-label">Email</label>
                                        <div class="col-md-9">
                                            <div class="input-group">
                                                <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
                                                <input type="email" id="lemail" name="email" value="<?php echo $unm ?>" class="form-control" placeholder="Enter Email Address..." required="required" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="password" class="col-sm-2 control-label">Password</label>
                                        <div class="col-md-9">
                                            <div class="input-group">
                                                <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
                                                <input type="password" id="lpassword" name="password" value="<?php echo $pwd ?>" class="form-control" placeholder="Enter Password..." required="required" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <input type="checkbox" name="chkbox" value="staylogged" class="checkbox-inline" />
                                            <label>  &nbsp; Keep me logged in</label>  &nbsp; <b>|</b>
                                            <a href="" style="text-decoration:none">  &nbsp; Forgot your password?</a>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <button type="submit" id="login" name="login" class="btn btn-primary show-page"  data-page="Profile"><span class="glyphicon glyphicon-user"></span> Login</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div><!--/.modal-body -->
                    </div><!--/.modal-content -->
                </div><!--/.modal-dialog -->
            </div><!--/.modal .fade -->
        </div> <!--/.row -->
    </div> <!--/.container -->

    <div class="container">
        <div class="page Home">
            <div class="row">
                <div class="col-xs-12">
                    <h1>Home</h1>
                </div>
            </div>
        </div>
        <div class="page Profile hide">
            <div class="row">
                <div class="col-xs-12">
                    <h1>Profile</h1>
                </div>
            </div>
        </div>
    </div>  
</body>

<!-- Core JavaScript -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="plugins/bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>
<script>
$( document ).ready(function() {
   $('#elogForm').submit(function(event) {
       event.preventDefault();
        var email = $('#lemail').val();
        var password = $('#lpassword').val();    

        $.ajax({
        data: {email : email, password : password},
        type: "POST",
        url: 'user.php',
        success: 
            function(data) {
                $('#show').html(data);
                $(".show-page[data-page=Profile]").trigger("click");
                $('#myModal').modal('hide');
            }
        });

   });

    $('.show-page').click(function(){
        var pageToShow = $(this).data('page');
        $('.page').addClass('hide');
        $('.' + pageToShow).removeClass('hide');
        if(typeof(Storage)!=="undefined") {
            localStorage.setItem('pageToShow', pageToShow);
        }
    });

});

</script>
</body>
</html>

所以我改变它以使它工作：

最重要的是，在您的提交函数中，变量获取了带有id的电子邮件并传递的字段的值。那些不存在。你的身份证是lemail和lpassword。
您试图提交一个ID不存在的表单。将选择器更改为表单elogForm的ID。
添加了event.preventDefault（），以便表单在提交时不会自动解除，以便显示您的错误消息（但是，您的user.php中的验证将永远不会运行，因为字段始终具有值，因为事实上你正在使用html5输入。）
在显示正确页面后，将关闭模式添加到成功功能。
删除了返回false（我认为这是您对preventDefault的尝试）。
通过将表单包裹在表单元素周围而不是整个页面来清理您的html，删除<center>标记并确保您的行内部有一个col。

所以，这可以在我的最后工作，但这是交易：你不能使用它，除非你答应我永远不会再使用<center>标签，甚至在测试页面;-)

Answer 2

我认为你的问题是你在div（$('#myLogin').submit(function()）上触发了一个提交事件，你应该触发登录按钮上的点击事件。

你的按钮元素是登录 su use

$('#login').click(function()

提交活动适用于表单元素。

请参阅this以获取文档。

模态对话登录系统

2 个答案: