模态对话登录系统
模态对话登录系统
提问于 2014-06-07 11:04:43
我想做的是使用引导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">×</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> Keep me logged in</label> <b>|</b>
<a href="" style="text-decoration:none"> 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";
}
?>回答 2
Stack Overflow用户
发布于 2014-06-07 12:51:18
这在底部是可行的，您可以读到问题是什么：
<!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">×</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> Keep me logged in</label> <b>|</b>
<a href="" style="text-decoration:none"> 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的电子邮件和pass。那些根本不存在。你的身份证是电子邮件和密码。
- 您试图提交一个id不存在的表单。将选择器更改为表单elogForm的id。
- 添加了event.preventDefault()，这样表单就不会在提交时自动关闭，这样就可以显示错误消息(尽管如此，user.php中的验证永远不会运行，因为由于您使用的是html5输入，所以字段总是有值)。
- 在成功函数显示正确的页面后添加关闭模式。
- 删除返回false (我认为这是您对preventDefault的尝试)。
- 通过将表单包装在表单元素(而不是整个页面)周围，删除
<center>标记，并确保在行中有一个col，从而清理了html。
因此，这对我来说是可行的，但条件是:你不能使用它，除非你向我保证，你永远不会再使用<center>标签，任何地方，甚至在测试页面上;-)
Stack Overflow用户
发布于 2014-06-07 11:10:34
我认为您的问题是在div ($('#myLogin').submit(function())上触发提交事件，我认为您应该在登录按钮上触发单击事件。
您的按钮元素是登录su使用
$('#login').click(function()
提交事件用于窗体元素。
有关文档，请参阅这。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24096505
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号