I am reading records from a database and used a card to display them. Each row from the record is used to construct a single card which is independent of the others. Every card has a button to expand view to show more details of that particular user on the next page. I want the 'id' the user whose card has been clicked and transfer it to the next page so that I can use it in another mysql query.
Please answer the question using php and javascript.
<?php
include_once('connect.php');
$sql = "SELECT * FROM user";
$result = $conn->query($sql);
?>
<!DOCTYPE html>
<header>
<meta charset="utf-8">
<!--========Personal style sheet link===========-->
<link rel="stylesheet" href="css/style.css">
<!--========Bootstrap cdn link============-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!--==========Google fonts link==========-->
<link href="https://fonts.googleapis.com/css?family=Montserrat|Oswald|Poppins|Roboto|Roboto+Condensed|Roboto+Mono&display=swap" rel="stylesheet">
<!--
font-family: 'Roboto Condensed', sans-serif;
font-family: 'Montserrat', sans-serif;
font-family: 'Roboto', sans-serif;
font-family: 'Oswald', sans-serif;
font-family: 'Roboto Mono', monospace;
font-family: 'Poppins', sans-serif;
-->
</header>
<body id="users-body" onload="createCard();">
<!--========Navigation bar==========-->
<div id="navbar" class="container">
<ul class="nav nav-pills justify-content-end">
<li class="nav-item"><a class="nav-link" href="/index.html">HOME</a></li>
<li class="nav-item"><a class="nav-link active" href="/users.php">VIEW ALL USERS</a></li>
</ul>
</div>
<!--===========Function for creating dynamic card element===========-->
<script>
function createCard(){
<?php
while($row = $result->fetch_assoc()){
?>
var box = document.createElement("div");
box.setAttribute("class", "container");
box.setAttribute("class", "justify-content-center");
var card = document.createElement("div");
card.setAttribute("class","card");
var cardBody = document.createElement("div");
cardBody.setAttribute("class", "card-body");
var cardImage = document.createElement("img");
cardImage.setAttribute("class", "card-img-top");
cardImage.setAttribute("src", "/images/dummy_user_image.png");
cardImage.setAttribute("alt", "user-image");
cardImage.setAttribute("style", "width: 10rem; height: 10rem; border-radius: 50%;");
var cardTitle = document.createElement("h2");
cardTitle.setAttribute("class", "card-title");
cardTitle.innerText = "<?php echo $row['name'] ?>";
var idLabel = document.createElement("h6");
idLabel.setAttribute("id", "<?php echo $row['id'] ?>");
idLabel.innerText = "ID: ";
var idNum = document.createElement("span");
idNum.setAttribute("id", "id-pass");
idNum.innerText = "<?php echo $row['id'] ?>";
var cardSubtext = document.createElement("h6");
cardSubtext.innerText = "Credit: ";
var creditPoint = document.createElement("span");
creditPoint.innerText = "<?php echo $row['credit'] ?>";
var btn = document.createElement("a");
btn.setAttribute("id", "view-btn");
btn.setAttribute("href", "/details.html");
btn.setAttribute("class", "btn btn-success");
btn.setAttribute("role", "BUTTON");
btn.innerText = "VIEW DETAILS";
document.body.appendChild(box);
box.appendChild(card);
card.appendChild(cardBody);
cardBody.appendChild(cardImage);
cardBody.appendChild(cardTitle);
cardBody.appendChild(idLabel);
idLabel.appendChild(idNum);
cardBody.appendChild(cardSubtext);
cardSubtext.appendChild(creditPoint);
cardBody.appendChild(btn);
<?php
}
?>
}
</script>
</body>
</html>
