Wrong name displayed when i used the session that used in modal - php

Question

my webpage displayed always the same name
i need to display the name inside the modal that i clicked
this my code :
display the content(which is stored in mysql) if it's click the picture .
<?php
$query = "SELECT * FROM pet where pet_cat = 'D' ORDER BY petid ";
$result = mysqli_query($con, $query);
while($row = mysqli_fetch_assoc($result))
{
$_SESSION['petname'] = $row['petname'];
$_SESSION['petdesc'] = $row['petdesc'];
$_SESSION['petimg'] = $row['petimg'];
$_SESSION['petid'] = $row['petid'];
echo '<li style="
padding-right: 20px;
padding-left: 20px;">';
echo '<a style= "cursor: pointer;"onclick= "document.getElementById(\'dogmod'.$row['petid'].'\').style.display=\'block\'">';
echo '<img src="data:image/jpeg;base64,'.base64_encode($_SESSION['petimg'] ).'" />';
echo '<h4>';
echo $_SESSION['petname'] ;
echo '</h4>';
include 'desca.php';
echo '</a>';
echo '</li>';
}
?>
the code of my modal
(desca.php)
<div id="dogmod<?=$_SESSION['petid']?>" class="modal">
<center>
<form class="modal-content animate" style="margin: 0; padding-left:50px; padding-right:50px; padding-bottom:50px;">
<div class="imgcontainer">
<span onclick="document.getElementById('dogmod<?= $_SESSION['petid'] ?>').style.display='none'" class="close" title="Close">×</span>
<h1 align=center>Description</h1>
<?php echo '<img src="data:image/jpeg;base64,'.base64_encode($_SESSION['petimg'] ).'" style="margin-top:50px;float:left; margin-right:50px;"/>'; ?>
<h1 style="margin-top:50px;margin-bottom:50px">
<?php echo $_SESSION['petname'] ;?>
</h1>
<p style="margin-bottom:50px;">
<?php echo $_SESSION['petdesc'] ;?>
</p>
<input type="button" value="Back" onclick=location.href='doga.php' class="button_1" style=" width: auto;padding: 10px 18px; background-color: #f44336; border:0px; color:white;">
<input type="button" value="Adopt" onclick=location.href='form.php' class="button2"style= " width: auto;padding: 10px 18px; background-color: #4CAF50; border:0px; color:white; ">
</form>
</center>
<script>
// Get the modal
var modal = document.getElementById('dogmod');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</div>
and this is the form that i want to display the name.
<div style="
height: 70px;
">
<label>Name:</label>
<input type="text" style=" width: 100%;
padding: 0px 10px;
width:323px;
text-align:center;
box-sizing: border-box;
border: none;
border-bottom: 1px solid;" placeholder="Name" value="<?=$_SESSION['fullname']?>" name="fname">
<label>Age:</label>
<input type="text"style=" width: 100%;
padding: 0px 20px;
width:100px;
text-align:center;
box-sizing: border-box;
border: none;
border-bottom: 1px solid;" placeholder="Age" name= "age">
<label>Email:</label>
<input type="text" style=" width: 100%;
padding: 0px 20px;
text-align:center;
width:298px;
box-sizing: border-box;
border: none;
border-bottom: 1px solid ;" value = "<?=$_SESSION['email']?>" placeholder="Email Address" name="email">
</div>
<div style="
height: 70px;
">
<label>Address:</label>
<input type="text" style=" width: 100%;
padding: 0px 20px;
width:795px;
text-align:center;
box-sizing: border-box;
border: none;
border-bottom: 1px solid;" placeholder="Address" name="adrs">
</div >
<div style="
height: 70px;
">
<label>Mobile Number:</label>
<input type="text" style=" width: 100%;
padding: 0px 20px;
text-align:center;
width:300px;
box-sizing: border-box;
border: none;
border-bottom: 1px solid ;" value = "<?=$_SESSION['contactnum']?>" placeholder="Contact Number" name="mnum"><br>
</div>
<div style="
height: 70px;
">
<label>Name/Description of animal:</label>
<input type="text" style=" width: 100%;
padding: 0px 20px;
text-align:center;
width:220px;
box-sizing: border-box;
border: none;
border-bottom: 1px solid ;" value = "<?=$_SESSION['petname']?>" placeholder="petname" name="petname">
</div>
() i used this code to display name that the same name in the modal but unfortunately this will display always the same wrong name.

Answer 1

The problem is that in your loop you overwrite $_SESSION["petname"] (as well, as some other values), so it always will store only the last petname. If I understand clearly you want next: user clicks the adopt-button after what he is redirected to the page with a form. In that form you want to see correct petname. Here is one possible solution:
Modify your adopt-button, set:
onclick=location.href='form.php?petname=<?=$_SESSION['petname']; ?>'
And in your modal modify input with petname, set:
value = "<?=$_GET['petname']?>"
I hope this will work. But you should think about improving you algorithm. You don't really need $_SESSION to store pet-information here. Also, maybe you would like to leave those modal on the same page and fill it with js.

Answer 2

like #Alex Yokisama Said
"The problem is that in your loop you overwrite $_SESSION["petname"]
(as well, as some other values)"
i suggest you should use AJAX, just like this !!
<?php
$query = "SELECT * FROM pet where pet_cat = 'D' ORDER BY petid ";
$result = mysqli_query($con, $query);
while($row = mysqli_fetch_assoc($result))
{
$petname = $row['petname'];
$petdesc = $row['petdesc'];
$petimg = $row['petimg'];
$petid = $row['petid'];
//echo '<li style="
//padding-right: 20px;
//padding-left: 20px;">';
// echo "<a data-toggle="modal" data-target="#modalForm" data-id=" $petid;" id="formPet"></a> ";
echo '<img src="data:image/jpeg;base64,'.base64_encode($petimg).'" />';
// echo '<h4>';
// echo $_SESSION['petname'] ;
// echo '</h4>';
//include 'desca.php';
//echo '</a>';
//echo '</li>';
?>
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modalForm" data-id="<?php echo $petid; ?>" id="formPet">FormOpen</button>
<?php
}
?>
//button click ajax script
<script>
$(document).ready(function() {
$(document).on('click', '#formPet', function(e) {
e.preventDefault();
var uid = $(this).data('id'); // it will get id of clicked row
$('#form-content').html(''); // leave it blank before ajax call
$('#formmodal-loader').show(); // load ajax loader
$.ajax({
url: 'form.php',
type: 'POST',
data: 'id=' + uid,
dataType: 'html'
})
.done(function(data) {
console.log(data);
$('#form-content').html('');
$('#form-content').html(data); // load response
$('#formmodal-loader').hide(); // hide ajax loader
})
.fail(function() {
$('#form-content').html('<i class="glyphicon glyphicon-info-sign"></i> Something went wrong, Please try again...');
$('#formmodal-loader').hide();
});
});
});
</script>
//This modal will execute once you click at-least 1 button in the while loop
<div class="modal fade" id="modalForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h5 class="modal-title w-100 font-bold">PET MODAL</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div id="formmodal-loader" style="display: none; text-align: center;">
<img src="img/ajax-loader.gif">
</div>
<!-- content will be load here -->
<div id="form-content"></div>
</div>
</div>
</div>
</div>
//create a file name form.php and get the requested id from your ajax post
<?php
require_once('dbconfig.php');
if (isset($_REQUEST['id']) ){
$pet_id = $_REQUEST['id'];
//create a form or view content here base on the id of pet you want to add/edit/delete/view
}