I have a php file with a bunch of <a></a> elements containing user names. Upon clicking one of these links, the link's data attributes are stored and posted to the second php file via AJAX. However, once I redirect to that file, the value I posted is not being displayed, instead I get the error: Undefined index userid.
Here's my code:
Index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Post Test</title>
</head>
<body>
<a href="#" class="user-name" data-user-id="1" data-render-view="users.php">User 1</a>
<a href="#" class="user-name" data-user-id="2" data-render-view="users.php">User 2</a>
<a href="#" class="user-name" data-user-id="3" data-render-view="users.php">User 3</a>
<a href="#" class="user-name" data-user-id="4" data-render-view="users.php">User 4</a>
<a href="#" class="user-name" data-user-id="5" data-render-view="users.php">User 5</a>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$('.user-staff').on('click',function(){
var userid = $(this).data('user-id');
var renderView = $(this).data('render-view');
$.ajax({
url: "users.php",
type: "POST",
data: {userid:userid},
success: function(data, textStatus, jqXHR){
window.location = renderView;
},
error: function (jqXHR, textStatus, errorThrown){
alert('Error!')
}
});
});
</script>
</body>
</html>
Users.php
<?php
$userIdExchanged = $_POST['userid'];
echo '<h1>user profile page</h1>';
echo $userIdExchanged; //Nothing is outputted here.
?>
Yes thats really what happened, basically, first step, you sent an ajax request, sending that value user-id.
Then after that you redirect. This means that you have two separate requests.
The first request was successful. After redirection (here comes the second) your values aren't there anymore since the data on the first request did not persist.
I don't know why do you have to make an ajax request. Might as well submit the form normally.
But if you really want to stay on this course, on the first request (the ajax request), you could save it in the session.
So that value that you sent will be saved. Then after redirection, you still have it for access:
<script type="text/javascript">
// maybe you mean `.user-name` not `.user-staff`
$('.user-name').on('click',function(){
var userid = $(this).data('user-id');
var renderView = $(this).data('render-view');
$.ajax({
url: "users.php",
type: "POST",
data: { userid: userid, setid: true }, // add a flag
success: function(data, textStatus, jqXHR){
window.location = renderView;
},
error: function (jqXHR, textStatus, errorThrown){
alert('Error!')
}
});
});
</script>
Then in PHP:
<?php
session_start();
// if the set flag is used, set it
if(isset($_POST['setid'])) {
$_SESSION['userid'] = $_POST['userid'];
}
// if no flag is set, then this will just continue and echo the value currently set
$userIdExchanged = $_SESSION['userid'];
echo '<h1>user profile page</h1>';
echo $userIdExchanged;
?>
Your class name in the html tags is "user-name" but you are listening for clicks on a class name of "user-staff" in your .js. Unsure if that is just a typo...
<a href="#" class="user-name" ......
$('.user-staff').on('click',function(){....