I have build a login system and I want to pop up a UI Dialog when somebody types a wrong username or a wrong password. I made it pop up when the submit button is clicked, but for some reasons, which I currently don't know, my Dialog box does not open, and I'm automatically redirected to a blank page.
This is my code:
if($count == 1){
$_SESSION['username'] = "username";
$_SESSION['password'] = "password";
header("Location:login_success.php");
}else{
?>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script>
$("#submit").click(function(){
$("#popup").dialog({
autoOpen: false,
modal: true,
height: 300,
width: 300,
title: "Error",
buttons: {
'OK': function(){
$(this).dialog("close");
}
}
});
});
$('#submit').click();
</script>
<?php
}
?>
Full HTML Form
<!DOCTYPE html>
<html>
<head>
<title>Sign In</title>
<link rel="stylesheet" href="css/SignIn.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<form action="includes/check_login.php" method="post">
<p>
<label for="username">Username</label>
<input id="username" name="username" type="text">
<span>Username cannot be empty</span>
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password">
<span>Password cannot be empty</span>
</p>
<p>
<input type="submit" value="LOG IN" id="submit">
</p>
<p id="account">
No account ? Please <a href="signUp.html">Sign Up!</a><br><br>
<a href="ForgotPassword.html">Forgot password ?</a>
</p>
</form>
<div id="popup" style="display: none">
<p>Wrong username or password</p>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/SignIn.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
You have to use ajax for this. else it always redirects and you could not open popup.
$(document).ready(function() {
$('#submit').click(function() {
$.ajax({
type: "POST",
url: 'includes/check_login.php',
data: {
username: $("#username").val(),
password: $("#password").val()
},
success: function(data)
{
if (data.Success) {
//if success
window.location.replace('admin/admin.php');
}
else {
//in valid username/password so open popup
$("#popup").dialog({
autoOpen: false,
modal: true,
height: 300,
width: 300,
title: "Error",
buttons: {
'OK': function(){
$(this).dialog("close");
}
}
});
}
}
});
});
});
Try to change the beginning of submit event in:
$("#submit").click(function(e){
e.preventDefault(); // this will avoid form submit on error
$("#popup").dialog({
Moreover, you do not see the dialg because you need to change the autopen attribute to:
autoOpen: true,
With autoOpen set to false, to open the dialog you need to do another call:
$("#popup").dialog('open');
The full code:
$("#submit").click(function(e){
e.preventDefault();
$("#popup").dialog({
autoOpen: true,
modal: true,
height: 300,
width: 300,
title: "Error",
buttons: {
'OK': function(){
$(this).dialog("close");
}
}
});<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<form action="http://www.google.com">
<p>
<input type="submit" value="LOG IN" id="submit">
</p>
</form>
<div id="popup" style="display: none">
<p>Wrong username or password</p>
</div></div>
Your trying to make a dialog popup when the submit button is clicked but your only declaring that WHEN the submit is clicked to show popup, your not calling it, try adding this:
$('#submit').click();
This worked for me!!
Add return false; at the end of your submit handler function. return false; does work of both e.preventDefault and e.stopPropagation at same time.(Reference : event.preventDefault() vs. return false )
Also change the line to $("#popup").dialog('open');
$("#submit").click(function(e){
$("#popup").dialog({
autoOpen: false,
modal: true,
height: 300,
width: 300,
title: "Error",
buttons: {
'OK': function(){
$(this).dialog("close");
}
}
});
$("#popup").dialog('open');
return false;
});
Full Snippet
<?php
if(isset($count) && $count == 1)
{
$_SESSION['username'] = "username";
$_SESSION['password'] = "password";
header("Location:login_success.php");
}
else
{
?>
<html>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<body>
<form><p>
<input type="submit" value="LOG IN" id="submit">
</p>
</form>
<div id="popup" style="display: none">
<p>Wrong username or password</p>
</div>
</body>
</html>
<script type="text/javascript">
$("#submit").click(function(e){
$("#popup").dialog({
autoOpen: false,
modal: true,
height: 300,
width: 300,
title: "Error",
buttons: {
'OK': function(){
$(this).dialog("close");
}
}
});
$("#popup").dialog('open');
return false;
});
</script>
<?php
}
?>