我试图在同一个弹出窗口中创建登录和注册表单，问题是，当我按下login按钮或signup按钮时，它只是关闭弹出窗口。
即使点击login或signup按钮，我希望弹出窗口保持打开。我希望它在弹出窗口中显示错误或成功消息。如果有任何错误，错误消息会显示在弹出窗口中。但是提交后弹出窗口会关闭，因此，我必须重新打开弹出窗口并检查是否有任何错误消息。
另外，我在标题中创建了一个弹出窗口。只有在单击show login按钮时，弹出窗口才会显示。
的header.php
<input type="button" id="show_login" value="Show Login">
<?php
if(isset($_POST['loginSubmit'])){
$username = $_POST['username1'];
$password = $_POST['password1'];
if(isset($_POST['username1'])){
$_SESSION['username1'] = $username;
header('Location: index.php');
exit;
} else {
$error[] = 'Wrong username or password';
}
}
?>
<div id="popupLogin">
<div class="x">CLOSE</div>
<form id="loginForm" name="login" action="#" method="post">
<div>LOGIN</div>
<div>
<?php
if(isset($error)){
foreach($error as $error){
echo '<p>'.$error.'</p>'; }
}
?>
</div>
<input class="c" name="username1" type="text" placeholder="Username" value="<?php if(isset($error)){ echo $_POST['username1']; } ?>" tabindex="1" />
<input class="c" name="password1" type="password" placeholder="Password"/>
<button id="btnloginSubmit" type="submit" name="loginSubmit">Log in</button>
<div id="btnSignup">Sign Up Here</div>
</form>
<?php
if(isset($_POST['signupSubmit'])){
if(strlen($_POST['username']) < 3){
$error[] = 'Username is too short.';}
if(strlen($_POST['password']) < 3){
$error[] = 'Password is too short.';}
if(!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){
$error[] = 'Please enter a valid email address';}
}
?>
<form id="signupForm" name="registration" method="post" action="#">
<div>
<?php
if(isset($error)){
foreach($error as $error){
echo '<p>'.$error.'</p>';}
}
?>
</div>
<input class="c" name="email" type="text" placeholder="Email" value="<?php if(isset($error)){ echo $_POST['email']; } ?>" />
<input class="c" name="username" type="text" placeholder="username" value="<?php if(isset($error)){ echo $_POST['username']; } ?>" />
<input class="c" name="password" type="password" placeholder="Password"/>
<button name="signupSubmit" type="submit">Sign up</button>
<div id="btnLogin">Log in Here</div>
</form>
的index.php
<?php include_once('header.php'); ?>
<body>
<p>Welcome!</p>
<script src="jquery-3.1.1.min.js"></script>
<script src="script.js"></script>
</html>
的script.js
$(document).ready(function()
{
$("#show_login").click(function(){
showpopup();
});
$(".x").click(function(){
hidepopup();
});
$("#btnSignup").click(function(){
$("#signupForm").css({"visibility":"visible","display":"block"});
$("#loginForm").css({"visibility":"hidden","display":"none"});
});
$("#btnLogin").click(function(){
$("#loginForm").css({"visibility":"visible","display":"block"});
$("#signupForm").css({"visibility":"hidden","display":"none"});
});
});
function showpopup()
{
$("#popupLogin").fadeIn();
$("#popupLogin").css({"visibility":"visible","display":"block"});
$("#signupForm").css({"visibility":"hidden","display":"none"});
}
function hidepopup()
{
$("#popupLogin").fadeOut();
$("#popupLogin").css({"visibility":"hidden","display":"none"});
$("#loginForm").css({"visibility":"visible","display":"block"});
//the code below does not work
$('#signupForm').submit(function(e) {
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
$.ajax({
url: formURL,
type: "POST",
data: postData,
success: function(data) {
console.log('success!')
}
});
e.preventDefault();
});
}
答案 0 :(得分：0)
试试这个：
$('#signupForm').submit(function(e) {
e.preventDefault();
e.stopPropagation();
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
$.ajax({
url: formURL,
type: "POST",
data: postData,
success: function(data) {
console.log('success!')
}
});
return false;
});