PHP Variables passed through a pop up window - php

Question

I have a page that pulls from a database and shows rows of thumbnail pictures and a small bit of information about them. I have a "Read More" button for each person. But you need to sign in to be able to read more about that person.
When you press "Read More" a pop up window opens offering the user to either "sign in" (already have an account) or "create a new account".
After a user signs in I would like that page to redirect to the specific person's profile. My issue is I can't figure out where to store that id variable. How do I pass that variable to the popup window and then on to the redirect link.
// User Log In Form
if (isset($_POST['submit']) && $_POST['submit'] == 'userSignIn') {
if($_POST['usersEmail'] == '') {
$msgBox = alertBox("Your User Email Address is required.", "<i class='fa fa-times-circle'></i>", "danger");
} else if($_POST['password'] == '') {
$msgBox = alertBox("Your Account Password is required.", "<i class='fa fa-times-circle'></i>", "danger");
} else {
// Check if the User account has been activated
$usersEmail = (isset($_POST['usersEmail'])) ? $mysqli->real_escape_string($_POST['usersEmail']) : '';
$check = $mysqli->query("SELECT isActive FROM users WHERE usersEmail = '".$usersEmail."'");
$row = mysqli_fetch_assoc($check);
// If the account is active - allow the login
if ($row['isActive'] == '1') {
$usersEmail = $mysqli->real_escape_string($_POST['usersEmail']);
$password = encryptIt($_POST['password']);
if($stmt = $mysqli -> prepare("
SELECT
userId,
usersEmail,
usersName
FROM
users
WHERE
usersEmail = ? AND password = ?
")) {
$stmt -> bind_param("ss",
$usersEmail,
$password
);
$stmt -> execute();
$stmt -> bind_result(
$userId,
$usersEmail,
$usersName
);
$stmt -> fetch();
$stmt -> close();
if (!empty($userId)) {
session_start();
$_SESSION["userId"] = $userId;
$_SESSION["usersEmail"] = $usersEmail;
$_SESSION["usersName"] = $usersName;
$id = **NEED PERSON'S ID**
header("Location: http://scout.militarypropertyproject.com/index.php?page=scout_detail&id=".$id."");
} else {
$msgBox = alertBox("Login Failed. Please check your entries." , "<i class='fa fa-times-circle'></i>", "danger");
}
}
// Update Last Visited Date for User
$lastVisited = date("Y-m-d H:i:s");
$sqlStmt = $mysqli->prepare("
UPDATE
users
SET
lastVisited = ?
WHERE
userId = ?
");
$sqlStmt->bind_param('ss',
$lastVisited,
$userId
);
$sqlStmt->execute();
$sqlStmt->close();
} else if ($row['isActive'] == '0') {
// If the account is not active, show a message
$msgBox = alertBox("Your Account is currently inactive, and you can not log in.", "<i class='fa fa-warning'></i>", "warning");
} else {
// No account found
$msgBox = alertBox("No Account found for that Email Address & Password.", "<i class='fa fa-times-circle'></i>", "danger");
}
}
}
//////////////////// User's displayed in rows ////////////////////////////
<div class="row">
<div id="FilterContainer">
<?php foreach ($categories as $category) { ?>
<div class="col-md-4">
<div id = "user-square">
<div class="avatar">
<center> <img src="<?php echo '../'.$avatarDir.$category['usersAvatar']; ?>" class="publicAvatar" /></center>
</div>
<div class = "user_bio_heading"><?php echo $category['name']; ?>
<?php $starNumber = $category['avgstars'];
for($x=1;$x<=$starNumber;$x++) {
echo '<i class="fa fa-star"></i>';
}
if (strpos($starNumber,'.')) {
echo '<i class="fa fa-star-half"></i>';
$x++;
}
while ($x<=5) {
echo '<i class="fa fa-star-o"></i>';
$x++;
}
?>
</div>
<div class = "user_bio"><?php echo substr($category['bio'], 0, 150) ?>...
<?php $_SESSION["scoutUserId"] = $category['id'];
?>
</div>
<a data-toggle="modal" href="#signIn" class="btn btn-warning btn-sm btn-icon"><i class="fa fa-unlock-alt"></i> Read More</a>
</div>
</div>
<?php }
?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- row -->
/////////////////////////////// POP UP WINDOW //////////////////////////
<div class="modal fade" id="signIn" tabindex="-1" role="dialog" aria-labelledby="newAccount" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header success">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i></button>
<h4 class="modal-title">Sign In</h4>
</div>
<form action="" method="post">
<p>All ready have a user account? Please Sign in.</p>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input type="email" class="form-control" required="" placeholder="User's Email Address" name="usersEmail" />
</div>
<br />
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock icon-lock"></i></span>
<input type="password" class="form-control" required="" placeholder="Account Password" name="password" />
</div>
<div class="row mt10">
<div class="col-md-4">
<p><small><a data-toggle="modal" href="#resetPassword">Reset Password?</a></small></p>
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="captcha" value="" />
<button type="input" name="submit" value="userSignIn" class="btn btn-success btn-icon"><i class="fa fa-check-square-o"></i> Sign In</button>
<button type="button" class="btn btn-warning btn-icon" data-dismiss="modal"><i class="fa fa-times-circle"></i> Cancel</button>
</div>
<hr>
<p>Don't have an account with us yet? No worries we'll get you set up real quick!</p>
<button type="input" name="submit" value="newAccount" class="btn btn-success btn-icon"><i class="fa fa-check-square-o"></i> Create Account</button>
</form>
</div>
</div>
</div>
<div class="col-md-8">
<span class="pull-right">
<button type="input" name="submit" value="userSignIn" class="btn btn-success btn-sm btn-icon"><i class="fa fa-sign-in"></i> Sign In</button>
<a data-toggle="modal" href="#newAccount" class="btn btn-warning btn-sm btn-icon"><i class="fa fa-unlock-alt"></i> Create New Account</a>
</span>
</div>
</div>
</form>
///////////////////////////////////////////////
Thanks in advance for any help you can provide.

Answer 1

How about you pass the user's id in Javascript and then interject it as hidden field into the form so when user successfully logs in, you know where they want to go.
So first add new data attribute to this code:
<a data-toggle="modal" href="#signIn" class="btn btn-warning btn-sm btn-icon"><i class="fa fa-unlock-alt"></i> Read More</a>
So it becomes (note data-uid):
<a data-toggle="modal" href="#signIn" class="btn btn-warning btn-sm btn-icon"><i class="fa fa-unlock-alt" data-uid="<?=$category['id']?>"></i> Read More</a>
Then in popup code where you have:
<input type="hidden" name="captcha" value="" />
You add new hidden input tag:
<input type="hidden" name="captcha" value="" />
<input id="wanted_user" type="hidden" name="userid" value="" />
Finally, in javascript modal popup code you interject the data-uid to the hidden field. You get the correct id by listening who triggered the event.
$('#signIn').on('show.bs.modal', function (e) {
var target_user = $(e.relatedTarget).data('uid');
$('#wanted_user').val(target_user);
});
Please note that this example might have some bugs and you need to debug it.
CodePen for you