Fancybox modal, can not populate input fields from database - php

Question

i have a project in php codeigniter where data is fetched from the DB, and with a foreach loop it creates rows in a table, each row has an edit button that opens the fancybox modal, in that modal i have 2 input fields, first name and last name that i try to populate them with the current values from the database, in the value section i tried value="<?php echo $row->first_name ?>, the problem is that all the rows get the same value, the modal does not get the correct data for each row.
Relevant code:
<a data-fancybox data-touch="false" href="#modal" class="btn btn-secondary" style=" margin-bottom:5px;" id="<?php echo $row->id; ?>" type="button" name="button">Edit</a>
<div id="modal">
<div class="content">
<div class="container-fluid">
<div class="row">
<form method="post" action="<?php echo base_url()?>index.php/welcome/formValidation">
<div class="form-row">
<div class="col-12 mb-3">
<h3 class="mb-3">Modifica Rapid:</h3>
<label for="nume">Nume:</label>
<input type="text" class="form-control" id="nume" placeholder="Nume" name="nume" value="<?php echo $row->last_name ?>"required>
</div>
<div class="col-12 mb-3">
<label for="prenume">Prenume</label>
<input type="text" class="form-control" id="prenume" placeholder="Prenume" name="prenume" value="<?php echo $row->first_name ?>" required>
</div>
<div class="col-12 mb-3 text-center">
<button style="width:150px;height:50px;" class="btn btn-warning" type="submit">Modifica</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>

Answer 1

What you need to do is, attach the $row id to the modal css id so each modal is unique.
<a data-fancybox data-touch="false" href="#modal<?=$row->id;?>" class="btn btn-secondary" style=" margin-bottom:5px;" id="<?php echo $row->id; ?>" type="button" name="button">Edit</a>
<div id="modal<?=$row->id;?>">
<div class="content">
<div class="container-fluid">
<div class="row">
<form method="post" action="<?php echo base_url()?>index.php/welcome/formValidation">
<div class="form-row">
<div class="col-12 mb-3">
<h3 class="mb-3">Modifica Rapid:</h3>
<label for="nume">Nume:</label>
<input type="text" class="form-control" id="nume" placeholder="Nume" name="nume" value="<?php echo $row->last_name ?>"required>
</div>
<div class="col-12 mb-3">
<label for="prenume">Prenume</label>
<input type="text" class="form-control" id="prenume" placeholder="Prenume" name="prenume" value="<?php echo $row->first_name ?>" required>
</div>
<div class="col-12 mb-3 text-center">
<button style="width:150px;height:50px;" class="btn btn-warning" type="submit">Modifica</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
So change
<a data-fancybox data-touch="false" href="#modal" class="btn btn-secondary" style=" margin-bottom:5px;" id="<?php echo $row->id; ?>" type="button" name="button">Edit</a>
to
<a data-fancybox data-touch="false" href="#modal<?=$row->id;?>" class="btn btn-secondary" style=" margin-bottom:5px;" id="<?php echo $row->id; ?>" type="button" name="button">Edit</a>
by adding the row id to the css to get unique modal id if not all link will call only the last modal.
The same change too for the modal change
<div id="modal">
to
<div id="modal<?=$row->id;?>">

Answer 2

One of the workaround is you could assign data attributes containing the last_name and first_name data, and add an edit-btn class (as the trigger) to the edit button link :
<a data-fancybox data-touch="false" href="#modal" class="btn btn-secondary edit-btn" data-lastName="<?php echo $row->last_name ?>" data-firstName="<?php echo $row->first_name ?>" style=" margin-bottom:5px;" id="<?php echo $row->id; ?>" type="button" name="button">Edit</a>
<div id="modal">
<div class="content">
<div class="container-fluid">
<div class="row">
<form method="post" action="<?php echo base_url()?>index.php/welcome/formValidation">
<div class="form-row">
<div class="col-12 mb-3">
<h3 class="mb-3">Modifica Rapid:</h3>
<label for="nume">Nume:</label>
<input type="text" class="form-control" id="nume" placeholder="Nume" name="nume" required>
</div>
<div class="col-12 mb-3">
<label for="prenume">Prenume</label>
<input type="text" class="form-control" id="prenume" placeholder="Prenume" name="prenume" required>
</div>
<div class="col-12 mb-3 text-center">
<button style="width:150px;height:50px;" class="btn btn-warning" type="submit">Modifica</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Then set the modal input value using each of the data value :
$(document).on("click", ".edit-btn", function () {
let lastname = $(this).attr("data-lastname");
let firstname = $(this).attr("data-firstname");
$('#nume').val(lastname); // set the lastname input inside the modal using the data attribute
$('#prenume').val(firstname); // set the firstname input inside the modal using the data attribute
});