Populate input values with PHP variables with related ID - php

Question

I am trying to create a form when the user clicks a button on a selected element. However, when i try it, i click a button and it either loads multiple, or loads 1 but shows only one value, if that makes sense. Here is my code:
<?php
$sql = "SELECT * FROM services";
$result = $database->query($sql);
while ($row = mysqli_fetch_assoc($result)) {
$id = $row['id'];
?>
<div class="service_display">
<div class="service_header"><?php echo $row['service_name']; ?></div>
<div class="service_desc"><?php echo $row['service_desc']; ?></div>
<div class="service_options">
<button type="button" class="additional_files" id="additional_files">Edit</button>
</div>
</div>
<?php
}
?>
I have a form that will appear with jQuery when the button is pressed, and im trying to fill the values with the respective id's. Here is my code for that:
<div class="show-onclick">
<h3>Edditing service: <?php echo $row['service_name']; ?></h3>
<hr>
<form action="inc/save_edit.php?id=<?php echo $row['id']; ?>" class="service_editform">
<input type="text" name="service_name" value="<?php echo $row['service_name']; ?>">
<textarea><?php echo $row['service_desc']; ?></textarea>
</form>
</div>
I think the problem is me not knowing where to put that code, if i put it in the while loop, it works, but understandably, i have like 10 input fields pop up..
if i put it outside the while loop and run a separate query to fill it, its empty..

Answer 1

As per you explanation of the problem its clear that you are looping the forms along with the front end display divs, which is not that good idea.
Always its better to use one modal window and then depending upon the click you have to load the data onto it and then pop it up.
Anyway for your scenario there may be more than one solution but this one will also serve the purpose:
Put the "show-onclick" whole div inside the "service_display" div so that now also it gets looped with no issues.
Now when the button gets clicked find the closest "service_display" div, it will give you the dom element & then use that and popup the "show-onclick" div enclosed within that.
Follow the code below:
<?php
$database = new mysqli("localhost", "root", "", "so");
$sql = "SELECT * FROM services";
$result = $database->query($sql);
while ($row = $result->fetch_assoc()) {
$id = $row['id'];
?>
<div class="service_display" id="sd_<?php echo $row['id']; ?>">
<div class="service_header"><?php echo $row['service_name']; ?></div>
<div class="service_desc"><?php echo $row['service_desc']; ?></div>
<div class="service_options">
<button type="button" class="additional_files" id="additional_files">Edit</button>
</div>
<div class="show-onclick">
<h3>Edditing service: <?php echo $row['service_name']; ?></h3>
<hr>
<form action="inc/save_edit.php?id=<?php echo $row['id']; ?>" class="service_editform">
<input type="text" name="service_name" value="<?php echo $row['service_name']; ?>">
<textarea><?php echo $row['service_desc']; ?></textarea>
</form>
</div>
</div>
<?php
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".show-onclick").css("display", "none");
$(document).on("click", ".additional_files", function() {
$(".show-onclick").css("display", "none");
var sd_id=$(this).closest('div.service_display').attr("id");
$("#"+sd_id+" .show-onclick").css("display", "block");
});
});
</script>
The only change i made to your code is i have added a dynamic id field to service_display div.
And i have used jquery to show and hide the forms of respective clicked buttons.
Again here i have used oop based mysqli which is not mandatory yours is also perfectly fine.