How To write correct code for Jquery Check, Validate & Redirect on success
Question
I worked for php over last 7-8 years. But i never try ajax, jquery or javascript more then very simply copy-paste work.Now i need jquery for my work.I almost finished all worked except a login with password process. So i try to write php and jquery code for this.
Here is my code: index.php
<html>
<head>
<script>
function login() {
// get values
var db = $("#db").val();
var pass = $("#pass").val();
// Check record
$.post("check.php", { db: db, pass: pass }, function (data) {
if (data.status=='s') //status is proper of the json object, which we gave in php code
{
var form = $('<form action="success.php" method="post">' +
'<input type="text" name="db" value="new1" />' +
'<input type="text" name="pass" value="12345" />' +
'</form>');
$('body').append(form);
form.submit();
} else {
alert( "status: " + data );
}
// close the popup
$("#pass").modal("hide");
// clear fields from the popup
$("#pass").val("");
});
}
</script>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body style="color:#ece9e9;background:#184C5D;"><div style="margin-top:25%; margin-left:25%; margin-right:auto;">
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "new1";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
echo '<button class="btn btn-success" data-toggle="modal" data-target="#pass">Login</button><br/><br/>';
$conn->close();
?>
</div>
<!-- Modal - login -->
<div class="modal fade" id="pass" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Enter Password</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="pass">Password</label>
<input type="text" name="pass" id="pass" placeholder="pass" class="form-control"/>
</div>
<?php echo '<input type="hidden" name="db" id="db" value="'.$dbname.'">'; ?>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="login()">Login</button>
</div>
</div>
</div>
</div>
<!-- // Modal -->
</body>
</html>
Here is code for check.php
<?php
$server = "localhost";
$username = "root";
$password = "";
$dbname = "$_POST[db]";
$pass = "$_POST[pass]";
$conn = new mysqli($server, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$dpass ="";
$sql = "SELECT pass FROM project WHERE id ='1' ";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$dpass = $row["pass"];
}
} else {}
if ($pass == $dpass) {
echo "s";
} else {
echo "xx";
}
$conn->close();
?>
My problem is when try with correct password [12345] its showing xx in alert pop. Can anyone find out what i missing? Because i write that jquery code from 3 different source. in other hand, when i test check.php with a simple post method page, its work. means check.php is ok.
2 answers
solution1
0 2017-09-22 23:30:03
You've got 2 HTML elements with id="pass":
line 47:
<div class="modal fade" id="pass" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
and line 57:
<input type="text" name="pass" id="pass" placeholder="pass" class="form-control" />
Therefore your var pass from line 8 will take the value of the first element with id 'pass' it will encounter. In this case that will be the div from line 47.
solution2
0 ACCPTED 2017-09-24 16:22:16
As @jeroen van der Hel said, i've got 2 HTML elements with id="pass". So first i need to change pass to anything, like passtab
<div class="modal fade" id="passtab" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
Then main thing is response contain spaces. So i'd to trim response before doing the checking through jquery trim function.
if (data.status=='s')
to
if ($.trim(data) == 's' )
Why the response contain spaces. You can find the answers here
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.