可以任何帮助我解决我的模态对话框登录系统 [英] Can any help me fix my modal dialog login system
本文介绍了可以任何帮助我解决我的模态对话框登录系统的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想要做的就是让使用模态对话框登录系统的自举3与展会和使用javascript隐藏的形式。如果用户成功登录，将重定向到档案形式使用javascript code.My问题后，我点击登录按钮的模式对话框即消失，并没有任何反应。
脚本：
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
$（'＃myLogin）。递交（函数（）{
变种的电子邮件= $（'＃邮件）VAL（）。
VAR密码= $（'＃通）VAL（）。
$阿贾克斯（{
数据： {
电子邮件：电子邮件，密码：密码
}，
键入：POST，
网址：user.php的，
成功：函数（数据）
{
$（'＃秀）HTML（数据）。
$（展示页[数据页=简介]）触发（点击）。
}
}）;
返回false;
}）;
}）;
＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
如果（typeof运算（存储）==不确定和放大器;！＆安培; localStorage.getItem（'pageToShow'））{
变种pageToShow = localStorage.getItem（'pageToShow'）;
$（'页面'）addClass（隐藏）。
$（+ pageToShow'。'）.removeClass（隐藏）;
}
$（'。节目页）。点击（函数（）{
VAR pageToShow = $（本）的.data（页）;
$（'页面'）addClass（隐藏）。
$（+ pageToShow'。'）.removeClass（隐藏）;
如果（typeof运算（存储）！==未定义）{
localStorage.setItem（'pageToShow'，pageToShow）;
}
$（'模式-BTN）。点击（函数（）{
$（'模式'）模态（隐藏）。
}）;
}）;
＆LT; / SCRIPT＆GT;
的index.php
＆LT;身体GT;
＆LT;形式方法=邮报ID =elogForm行动=的index.php＆GT;
＆LT;导航类=导航栏导航栏默认角色=导航＆GT;
＆LT; DIV CLASS =集装箱液＆GT;
＆LT; UL类=NAV导航栏，导航栏导航左＆GT;
＆LT;李＆GT;＆LT;一个数据切换=模态的href =＃myModal＆GT;＆LT;跨度类=glyphicon glyphicon用户＆GT;＆LT; / SPAN＆GT;登录＆LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / NAV＆GT;
＆LT; DIV CLASS =容器ID =myLogin＆GT;
＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS =模式变脸ID =myModal的tabindex = - 1角色=对话框中的ARIA隐藏=真＆GT;
＆LT; DIV CLASS =模式 - 对话＆GT;
＆LT; DIV CLASS =模式的内容＆GT;
＆LT; DIV CLASS =模式的首部＆GT;
＆LT;按钮式=按钮级=关闭数据解雇=莫代尔ARIA隐藏=真＆GT;＆安培;倍;＆LT; /按钮＆GT;
＆LT; H5类=模式的标题＆gt;请输入电子邮件地址和密码登录与＆lt; / H5＆GT;
＆LT; DIV ID =秀＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =模态体＆GT;
＆LT; DIV CLASS =形横＆GT;
＆LT; DIV CLASS =形组＆GT;
＆LT;标签=电子邮件级=COL-SM-2控制标签＆GT;电子邮件＆LT; /标签＆gt;
＆LT; DIV CLASS =COL-MD-9＆GT;
＆LT; DIV CLASS =输入组＆GT;
＆LT;跨度类=输入组插件＆GT;＆LT;我类=发发信封-O FA-FW＆GT;＆LT; / I＆GT;＆LT; / SPAN＆GT;
＆LT;输入类型=电子邮件ID =lemailNAME =电子邮件值=＆LT; PHP的echo $ UNM＆GT;？类=表单控制占位符=输入电子邮件地址...需要=必要/＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =形组＆GT;
＆LT;标签=密码级=COL-SM-2控制标签＆GT;密码＆LT; /标签＆gt;
＆LT; DIV CLASS =COL-MD-9＆GT;
＆LT; DIV CLASS =输入组＆GT;
＆LT;跨度类=输入组插件＆GT;＆LT;我类=发发密钥FA-FW＆GT;＆LT; / I＆GT;＆LT; / SPAN＆GT;
＆LT;输入类型=密码ID =lpasswordNAME =密码值=＆LT; PHP的echo $ PWD＆GT;？类=表单控制占位符=请输入密码......需要=必要/＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =形组＆GT;
＆LT; DIV CLASS =COL-SM-偏移2 COL-SM-10＆GT;
＆LT;输入类型=复选框名称=chkbox值=staylogged级=复选框内联/＆GT;
＆LT;标签＆gt; ＆功放; NBSP;保持登入与＆lt; /标签＆gt; ＆功放; NBSP; ＆LT; B＆GT; |＆LT; / B＆GT;
＆LT; A HREF =的风格=文本装饰：无＆GT; ＆功放; NBSP;忘记了密码LT; / A＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =形组＆GT;
＆LT; DIV CLASS =COL-SM-偏移2 COL-SM-10＆GT;
＆LT;按钮类型=提交ID =登陆NAME =登录级=BTN BTN-主要展示页的数据页=档案＆GT;＆LT;跨度类=glyphicon glyphicon用户＆GT ;＆LT; / SPAN＆GT;登录＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =容器＆GT;
＆LT; DIV CLASS =页首页＆GT;
＆LT; DIV CLASS =行＆GT;
＆LT;中心＆GT;
＆LT; H1＆GT;家和LT; / H1＆GT;
＆LT; /中心＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =页面简介隐藏＆GT;
＆LT; DIV CLASS =行＆GT;
＆LT;中心＆GT;
＆LT; H1＆GT;档案＆LT; / H1＆GT;
＆LT; /中心＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /形式GT;
＆LT; /身体GT;
user.php的
＆LT; PHP
include_once（'connection.php'）;
$ DB =新的连接（）;
$ DB = $ DB-＆GT;数据库连接（）;
$电子邮件= $ _ POST [电子邮件];
$传球= $ _ POST ['密码'];
如果（空（$电子邮件）及！＆安培;！空（$通行证））{
$ ST = $ DB-＆GT; prepare（SELECT * FROM用户WHERE电子邮件=和密码=？）;
$ ST-＆GT; bindParam（1，$电子邮件）;
$ ST-＆GT; bindParam（2，$通行证）;
$ ST-＆GT;执行（）;
如果（$ ST-＆GT; rowCount等（）== 1）{
回声电子邮件核实，访问授予;
} 其他 {
回声不正确的电子邮件地址或密码;
}
}其他{
回声请输入邮箱和密码;
}
？＆GT;
解决方案
这工作在底部，你可以读到的问题是：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML LANG =EN＆GT;
＆LT; HEAD＆GT;
＆LT; META HTTP-当量=Content-Type的CONTENT =text / html的;字符集= UTF-8＆GT;
＆LT;元字符集=utf-8＆GT;
＆LT; META NAME =视口内容=WIDTH =装置宽度，初始规模= 1＆GT;
＆LT; META NAME =说明内容=＆GT;
＆LT; META NAME =作者内容=＆GT;
＆LT;链接REL =快捷方式图标的href =＆GT;
＆LT;冠军＆GT;模态登录＆LT; /标题＆GT;
＆LT;！ - 核心CSS - ＆GT;
＆LT;链接相对=样式类型=文/ CSS的href =CSS / bootstrap.min.css＆GT;
＆LT;风格＆GT;
H1 {
文本对齐：中心;
}
＆LT; /风格＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;导航类=导航栏导航栏默认角色=导航＆GT;
＆LT; DIV CLASS =集装箱液＆GT;
＆LT; UL类=NAV导航栏，导航栏导航左＆GT;
＆LT;李＆GT;＆LT;一个数据切换=模态的href =＃myModal＆GT;＆LT;跨度类=glyphicon glyphicon用户＆GT;＆LT; / SPAN＆GT;登录＆LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; / NAV＆GT;
＆LT; DIV CLASS =容器ID =myLogin＆GT;
＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS =模式变脸ID =myModal的tabindex = - 1角色=对话框中的ARIA隐藏=真＆GT;
＆LT; DIV CLASS =模式 - 对话＆GT;
＆LT; DIV CLASS =模式的内容＆GT;
＆LT; DIV CLASS =模式的首部＆GT;
＆LT;按钮式=按钮级=关闭数据解雇=莫代尔ARIA隐藏=真＆GT;＆安培;倍;＆LT; /按钮＆GT;
＆LT; H5类=模式的标题＆gt;请输入电子邮件地址和密码登录与＆lt; / H5＆GT;
＆LT; DIV ID =秀＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =模态体＆GT;
＆LT;形式方法=邮报ID =elogForm＆GT;
＆LT; DIV CLASS =形横＆GT;
＆LT; DIV CLASS =形组＆GT;
＆LT;标签=电子邮件级=COL-SM-2控制标签＆GT;电子邮件＆LT; /标签＆gt;
＆LT; DIV CLASS =COL-MD-9＆GT;
＆LT; DIV CLASS =输入组＆GT;
＆LT;跨度类=输入组插件＆GT;＆LT;我类=发发信封-O FA-FW＆GT;＆LT; / I＆GT;＆LT; / SPAN＆GT;
＆LT;输入类型=电子邮件ID =lemailNAME =电子邮件值=＆LT; PHP的echo $ UNM＆GT;？类=表单控制占位符=输入电子邮件地址...需要=必要/＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =形组＆GT;
＆LT;标签=密码级=COL-SM-2控制标签＆GT;密码＆LT; /标签＆gt;
＆LT; DIV CLASS =COL-MD-9＆GT;
＆LT; DIV CLASS =输入组＆GT;
＆LT;跨度类=输入组插件＆GT;＆LT;我类=发发密钥FA-FW＆GT;＆LT; / I＆GT;＆LT; / SPAN＆GT;
＆LT;输入类型=密码ID =lpasswordNAME =密码值=＆LT; PHP的echo $ PWD＆GT;？类=表单控制占位符=请输入密码......需要=必要/＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =形组＆GT;
＆LT; DIV CLASS =COL-SM-偏移2 COL-SM-10＆GT;
＆LT;输入类型=复选框名称=chkbox值=staylogged级=复选框内联/＆GT;
＆LT;标签＆gt; ＆功放; NBSP;保持登入与＆lt; /标签＆gt; ＆功放; NBSP; ＆LT; B＆GT; |＆LT; / B＆GT;
＆LT; A HREF =的风格=文本装饰：无＆GT; ＆功放; NBSP;忘记了密码LT; / A＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =形组＆GT;
＆LT; DIV CLASS =COL-SM-偏移2 COL-SM-10＆GT;
＆LT;按钮类型=提交ID =登陆NAME =登录级=BTN BTN-主要展示页的数据页=档案＆GT;＆LT;跨度类=glyphicon glyphicon用户＆GT ;＆LT; / SPAN＆GT;登录＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /形式GT;
＆LT; / DIV＆GT;＆LT;！ - 。/模体 - ＆GT;
＆LT; / DIV＆GT;＆LT;！ - 。/莫代尔内容 - ＆GT;
＆LT; / DIV＆GT;＆LT;！ - 。/模态，对话框 - ＆GT;
＆LT; / DIV＆GT;＆LT;！ - 。/语气.fade - ＆GT;
＆LT; / DIV＆GT; ＆LT;！ - /行 - ＆GT;
＆LT; / DIV＆GT; ＆LT;！ - 。/容器 - ＆GT;
＆LT; DIV CLASS =容器＆GT;
＆LT; DIV CLASS =页首页＆GT;
＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS =COL-XS-12＆GT;
＆LT; H1＆GT;首页＆LT; / H1＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =页面简介隐藏＆GT;
＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS =COL-XS-12＆GT;
＆LT; H1＆GT;简介＆LT; / H1＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT;！ - 核心JavaScript - ＆GT;
＆所述;脚本的src =的http：//$c$c.jquery.com/jquery-1.11.0.min.js＆GT;＆所述; /脚本＆GT;
＆LT;脚本SRC =插件/引导-3.1.1-DIST / JS / bootstrap.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本＆GT;
$（文件）。就绪（函数（）{
$（'＃elogForm）。递交（函数（事件）{
。事件preventDefault（）;
变种的电子邮件= $（'＃lemail）VAL（）。
VAR密码= $（'＃lpassword）VAL（）。
$阿贾克斯（{
数据：{电子邮件：电子邮件，密码：密码}，
键入：POST，
网址：user.php的，
成功：
功能（数据）{
$（'＃秀）HTML（数据）。
$（展示页[数据页=简介]）触发（点击）。
$（'＃myModal）模式（隐藏）。
}
}）;
}）;
$（'。节目页）。点击（函数（）{
VAR pageToShow = $（本）的.data（页）;
$（'页面'）addClass（隐藏）。
$（+ pageToShow'。'）.removeClass（隐藏）;
如果（typeof运算（存储）！==未定义）{
localStorage.setItem（'pageToShow'，pageToShow）;
}
}）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
所以我改变，使其工作：
- 最重要的是，在你提交功能，该变量与ID的电子邮件和传递越来越字段的值。那些不存在。你的ID是lemail和lpassword。
- 您正试图用一个不存在的ID提交表单。改变了选择器表单elogForm的ID。
- 添加事件。preventDefault（）这样的形式将不排除在自动提交，这样可以显示你的错误信息（尽管在你的user.php的验证将永远不会运行，因为该领域总会有值由于您使用的是HTML5输入）的事实。
- 新增的密切模式能否成功的功能后，会显示正确的页面。
- 删除返回假的（我认为这是你企图在preventDefault）。
- 整理了你的HTML被周围的表单元素而不是整个页面包装的形式，消除了
＆LT;中心＆GT;标签，并确保你有一个山坳里面你行。
所以，这个工作对我的结束，但这里的交易：你不能使用它，除非你答应我，你永远不会再次使用＆LT;中心＆GT; 标签以往，任何地方，甚至在测试页; - ）
I wanted to do is make a login system using modal dialog from bootstrap 3 with show and hide form using javascript. After the user successfully login it will redirect to Profile form using javascript code.My problem is After i click the login button the modal dialog disapper and nothing happens.
script:
<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";
}
?>
解决方案
This works at the bottom you can read what the issues were:
<!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>
So what I changed to make it work:
- Most importantly, in your submit function, the variables were getting the value of fields with id's of email and pass. Those didn't exist. Your id's are lemail and lpassword.
- You were attempting to submit a form with an id that didn't exist. Changed the selector to the id of your form elogForm.
- Added event.preventDefault() so that the form wouldn't dismiss automatically on submit so that your error message could be displayed (though, the validation in your user.php will never run since the fields will always have values due to the fact that you are using html5 inputs).
- Added the close modal to the success function after it displays the correct page.
- Removed the return false (I think that was your attempt at preventDefault).
- Cleaned up your html by wrapping the form around the form elements not the whole page, removing the
<center>tags and making sure you had a col inside of your rows.
So, this works on my end, but here's the deal: You can't use it unless you promise me that you will never again use <center> tags ever, anywhere, even on a test page ;-)
这篇关于可以任何帮助我解决我的模态对话框登录系统的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
