Запретить перенаправление / обновление после отправки во всплывающем окне
Я пытаюсь сделать Форма входа и регистрации в том же всплывающем окне и проблема, когда я нажимаю 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();
});
}
Решение
Просто попробуйте это:
$('#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;
});
Другие решения
Других решений пока нет …
detector