Pop-up form does not go visible
Question
Recently I wanted to make a pop-up form with Ajax and Bootstrap. To do this I got this code from a tutorial site. Then I noticed that my code does not pop up anything when I clicked the first Login button(It should work that way according to the tutorial). Is my code missing something or it is clearly wrong? I am only a beginner. Please help. Here is my code:
index.php
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Make Login Form by Using Bootstrap Modal with PHP Ajax Jquery</title>
<script src="js/jquery.js"></script>
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<br />
<div class="container" style="width:700px;">
<h3 align="center">Make Login Form by Using Bootstrap Modal with PHP Ajax Jquery</h3><br />
<br />
<br />
<br />
<br />
<br />
<?php
if(isset($_SESSION['username']))
{
?>
<div align="center">
<h1>Welcome - <?php echo $_SESSION['username']; ?></h1><br />
<a href="#" id="logout">Logout</a>
</div>
<?php
}
else
{
?>
<div align="center">
<button type="button" name="login" id="login" class="btn btn-success" data-toggle="modal" data-target="#loginModal">Login</button>
</div>
<?php
}
?>
</div>
<br />
</body>
</html>
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<label>Username</label>
<input type="text" name="username" id="username" class="form-control" />
<br />
<label>Password</label>
<input type="password" name="password" id="password" class="form-control" />
<br />
<button type="button" name="login_button" id="login_button" class="btn btn-warning">Login</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#login_button').click(function(){
var username = $('#username').val();
var password = $('#password').val();
if(username != '' && password != '')
{
$.ajax({
url:"action.php",
method:"POST",
data: {username:username, password:password},
success:function(data)
{
//alert(data);
if(data == 'No')
{
alert("Wrong Data");
}
else
{
$('#loginModal').hide();
location.reload();
}
}
});
}
else
{
alert("Both Fields are required");
}
});
$('#logout').click(function(){
var action = "logout";
$.ajax({
url:"action.php",
method:"POST",
data:{action:action},
success:function()
{
location.reload();
}
});
});
});
</script>
action.php
<?php
session_start();
$connect = mysqli_connect("localhost", "root", "", "database1");
if(isset($_POST["username"]))
{
$query = "
SELECT * FROM admin_login
WHERE admin_name = '".$_POST["username"]."'
AND admin_password = '".$_POST["password"]."'
";
$result = mysqli_query($connect, $query);
if(mysqli_num_rows($result) > 0)
{
$_SESSION['username'] = $_POST['username'];
echo 'Yes';
}
else
{
echo 'No';
}
}
if(isset($_POST["action"]))
{
unset($_SESSION["username"]);
}
?>
2 answers
solution1
0 ACCPTED 2018-08-31 10:13:07
you have implemented the code for everything but not for opening the modal. Add this to your script
$("#login").on('click',function(){
`$("loginModal").modal('show');`
});
solution2
0 2018-08-31 11:42:13
Your code working perfectly mistake in CSS your popup will be hide for ".fade:not(.show)" class used "opacity:0" you will be increased you "opacity:10" according your requirement.
change below CSS:
.fade:not(.show) {
opacity: 1;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.