How do I retrieve data display in modal - php

Question

First Image to show all data in card view
second image for pop up modal
What I want is when I clicked the View button, it will get all the data and display in the modal. The data can be display in the inputbox, textarea and image.
This is the code to row all the data in a card view
<?php
while ($row = mysqli_fetch_assoc($result)){
$wid = $row['web_id'];
?>
<div class="col-sm-4 col-xs-12">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h3><b><?php echo $row['web_name']; ?></b></h3>
</div>
<div class="panel-body">
<?php
if(empty($row['web_image'])){
echo "<span class='no-image glyphicon glyphicon-picture'></span><br><b>NO IMAGE AVAILABLE</b>";
}else{
echo "<div class='imageContainer'><img src='images/".$row['web_image']. "'width='50%' height='15%'/></div>";
}
?>
</div>
<div class="panel-footer">
<h4><b><?php echo $row['web_id']; ?></b></h4>
<a target="_blank" href="<?php echo $row['web_address']; ?>"><h4><?php echo $row['web_address'];?></h4></a>
<h4><?php echo $row['web_description']; ?></h4>
<hr>
//This is an button for view modal
<?php echo '<button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#viewmodal" class="viewbtn">View</button>'; ?>
<?php echo '<button class="btn1 btn-sm"><span class="glyphicon glyphicon-edit"></span> EDIT</button>';?>
</div>
</div>
</div>
<?php
}
?>
This is the modal code
<!--View Modal pop up-->
<div class="modal fade" id="viewmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >
<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>
<h3 class="modal-title" id="exampleModalLabel"><b>VIEW DATA</b></h3>
</div>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" enctype="multipart/form-data">
<div class="modal-body">
<div class="form-group">
<label><b>Web ID : </b></label> <span class="validation">*</span>
<input name="w_id" id="w_id" value="" type="text" class="form-control input-box" readonly>
</div>
<div class="form-group">
<label><b>Web Name : </b></label> <span class="validation">*</span>
<input name="w_name" id="w_name" type="text" class="form-control input-box" required>
</div>
<div class="form-group">
<label><b>Web Address : </b></label> <span class="validation">*</span>
<input name="w_address" id="w_address" type="text" class="form-control input-box" required></input>
</div>
<div class="form-group">
<label><b>Web Description : </b></label> <span class="validation">*</span>
<input name="w_description" id="w_description" type="text" class="form-control input-box" required></input>
</div>
<div class="form-group">
<label><b>Web Image : </b></label> <span class="validation">*</span>
<img src='images/".$row["web_image"]. "'width='333px;' height='200px;' name="w_image" id="w_image"/>
</div>
</div>
<div class="modal-footer">
<button type="submit" name="save" class="btn btn-primary">SAVE</button>
<button type="button" name="close" class="btn btn-warning" data-dismiss="modal">CLOSE</button>
</div>
</form>
</div>
</div>
</div>

Answer 1

As i can see you are looping through the panel and you have only one modal in there, what you can do is use data property and JS/Jquery combination to do this.
<?php
while ($row = mysqli_fetch_assoc($result)){
$wid = $row['web_id'];
?>
<div class="col-sm-4 col-xs-12">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h3><b><?php echo $row['web_name']; ?></b></h3>
</div>
<div class="panel-body">
<?php
if(empty($row['web_image'])){
echo "<span class='no-image glyphicon glyphicon-picture'></span><br><b>NO IMAGE AVAILABLE</b>";
}else{
echo "<div class='imageContainer'><img src='images/".$row['web_image']. "'width='50%' height='15%'/></div>";
}
?>
</div>
<div class="panel-footer">
<h4><b><?php echo $row['web_id']; ?></b></h4>
<a target="_blank" href="<?php echo $row['web_address']; ?>"><h4><?php echo $row['web_address'];?></h4></a>
<h4><?php echo $row['web_description']; ?></h4>
<hr>
//This is an button for view modal
<?php echo '<button type="button" class="btn btn-success btn-sm" data-img="<?=$row['img']?>" class="viewbtn">View</button>'; ?>
<?php echo '<button class="btn1 btn-sm"><span class="glyphicon glyphicon-edit"></span> EDIT</button>';?>
</div>
</div>
</div>
<?php
}
?>
<!--View Modal pop up-->
<div class="modal fade" id="viewmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >
<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>
<h3 class="modal-title" id="exampleModalLabel"><b>VIEW DATA</b></h3>
</div>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" enctype="multipart/form-data">
<div class="modal-body">
<div class="form-group">
<label><b>Web Image : </b></label> <span class="validation">*</span>
<img width='333px;' height='200px;' name="w_image" id="w_image"/>
</div>
</div>
<div class="modal-footer">
<button type="submit" name="save" class="btn btn-primary">SAVE</button>
<button type="button" name="close" class="btn btn-warning" data-dismiss="modal">CLOSE</button>
</div>
</form>
</div>
</div>
</div>
Now a little bit of jQuery to assign values in the modal fields and open the modal,when view button is clicked
$(function(){
$(".viewbtn").click(function(){
var img = $(this).data("img")
$("#w_image").attr("src",img)
$("#viewmodal").modal()
})
})
So, this is the basic idea of it, you can add other data props and assign the values to the fields accordingly