Вход во всплывающее окно на неправильном входе

Я создал всплывающее окно входа в систему, используя jquery и подтверждающий логин через php, используемый на странице. Когда пользователь вводит правильные учетные данные, страница перенаправляется туда, где я хочу, но когда указаны неправильные учетные данные, всплывающее окно исчезает, а затем снова набирается ссылка для входа, чтобы увидеть сообщение в форме. Я хочу, чтобы это всплывающее окно не отображалось с сообщением "Имя пользователя/пароль". Я много исследовал, но я не нашел точного ответа. Я видел несколько примеров, и они использовали Ajax, но, пожалуйста, попробуйте дать мне решение без Ajax, поскольку я никогда не использовал его.

Код для входа в систему: index.php

<a href="#signin-box" target="_blank">Login/Register</a>

 <div id="signin-box">
 
 <form method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>">
 <fieldset>
 <p>
 </p>
 
 <p>
 <button type="button" id="register">Register</button></p>
 <p><a href="#" target="_blank">Forgot your password?</a></p>
 <!--?php
 require 'connect.php';
 if(isset($_POST['email'])&&isset($_POST['password'])) {
 $email=htmlentities($_POST['email']);
 $password=htmlentities($_POST['password']);
 if(!empty($email)&&!empty($password)) {
 $query="SELECT 'name' FROM 'users' WHERE 'email'='".mysql_real_escape_string($email)."' and 'password'='".mysql_real_escape_string($password)."'";
 $query_run=mysql_query($query);
 if(mysql_num_rows($query_run)==0) {

 ?-->
 <p id="message">Username/Password is incorrect.</p>
 <!--?php 
 }
 else{
 header('Location:timer.html');
 }
 }
 }
 ?-->

 </fieldset>
 </form>
 </div>

Код JQuery: loginpopup.js

$(document).ready(function() {

/* On clicking the Login link */

$('a.loginwindow').click(function() {
 $('.signin-popup').fadeIn(300);
});

/* On clicking close button */

$('.close').click(function(){
 $('.signin-popup').remove();
});


/* On clicking register button */

$('#register').click(function(){
 $('.signin-popup').remove();
 $('.signup-popup').fadeIn(300);
});

/* Clicking close button of register popup */
$('.close_signup').click(function(){
 $('.signup-popup').remove();
});

});

Подключение к базе данных: connect.php

Стили: style.css

.signin-popup {
display: none;
background:#fff;
padding:20px 30px 20px 30px;
border: 2px solid #ddd;
float: left; 
position:fixed;
top: 20%;
left: 35%;
 z-index: 99999;
box-shadow: 0px 0px 20px #999;

/* CSS3 */
-moz-box-shadow: 0px 0px 20px #999;
/* Firefox */
-webkit-box-shadow: 0px 0px 20px #999;
/* Safari, Chrome */

border-radius: 15px;
/* earlier 3px radius */
-moz-border-radius: 15px;
/* Firefox */
-webkit-border-radius: 15px;
/* Safari, Chrome */;
}
img.btn_close {
/* Position the close button */
float: right;
margin: -40px -40px 0 0;
}
fieldset {
 border: none;
}
form.signin{
display: block;
}
form.signin p{
color: #999;
font-size: 14px;
/*
line-height: 5px;
*/
}
form.signin .input {
border:3px solid #06F;
color: #797979;
font:normal 15px 'century gothic';
padding: 6px 4px;
width: 275px;
}

form.signin .input:focus{
border:3px solid #F30;
}
.button {
background: -moz-linear-gradient(center top, #0CF,#09F);
background: -webkit-gradient(linear, left top, left bottom, from(#0CF), to(#09F));
border:none;

color:#333;
cursor: pointer;
/*display: inline-block;*/
padding:8px 20px;
font:normal 15px "Comic Sans MS", cursive;
width:142px;
}
.button:hover {
background: -moz-linear-gradient(center top,#0FF,#0CF);
background: -webkit-gradient(linear, left top, left bottom, from(#0FF), to(#0CF));
font-weight:bold;
}
.forgot{
text-decoration:none;
font:normal 12px Verdana, Geneva, sans-serif;
color:#797979;
} 
#message{
text-align:center;
color:#F00;
font:bold 15px "Comic Sans MS", cursive;
}
2 ответа

Простейшим решением вашей проблемы является вызов функции javascript при отправке формы (onclick event of submit). Использование Ajax проверяет учетные данные пользователя, и если его правильное возвращение истинно или вызов метода отправки формы windows.frmname.submit().

В случае отказа вернуть false.

                            


Я бы сказал, у вас есть 2 варианта:

  • Если вы не хотите обновлять свою страницу, вам нужно использовать Ajax. Это довольно легко с библиотеками, такими как jQuery, которые обрабатывают все сложные вещи.
  • Вы не возражаете, что ваша страница обновляется, поэтому вы можете активировать всплывающее окно, когда ваша страница обновится. Существует несколько способов: параметр в URL, скрытое поле... Вы можете проверить это в функции $(document).ready().

licensed under cc by-sa 3.0 with attribution.