входное значение внутри модального всегда получает последнюю запись

Question

У меня проблема с кодом, у меня есть таблица, содержащая сведения о пользователе, и в каждой строке есть 2 кнопки: редактировать и удалять. Когда кнопка нажата, она вызывает модальный режим. Например, если я нажму кнопку редактирования, появится модальное окно, отображающее мои данные в качестве заполнителя.

Мой вопрос: почему значение заполнителя ввода всегда заполняется последней записью из моего таблица?

Вот код:

<table class="table table-hover">
    <thead>
        <tr>
            <th scope="col">No</th>
            <th scope="col">Nama</th>
            <th scope="col">Alamat</th>
            <th scope="col">Tempat/Tanggal Lahir</th>
            <th scope="col">No Telp</th>
            <th scope="col">Aksi</th>
        </tr>
    </thead>
    <tbody>
        <?php $i=1;?>
        <?php foreach($daftar_user as $ds):?>
        <tr>
            <th scope="row"><?=$i;?></th>
            <td><?=$ds['nama'];?></td>
            <td><?=$ds['alamat'];?></td>
            <td><?=Date(' D m',$ds['tanggal_lahir']);?></td>
            <td><?=$ds['notelp'];?></td>
            <td>
                <a href="" data-target="#editprofile" data-toggle="modal" class="badge badge success">Edit
                    Profile</a>
                <a href="" class="badge badge-danger">Hapus Profile</a>
            </td>
        </tr>
        <?php $i++; endforeach;?>
    </tbody>
</table>

А это модальный код:

<div class="modal fade" id="editprofile" tabindex="-1" role="dialog" aria-labelledby="ediprofileTitle"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="ediprofileTitle">Edit Profile</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <form action="<?=base_url('admin/manajemen_akun');?>" method="post">
            <div class="modal-body">
                <div class="form-group">
                    <input type="hidden" class="form-control" placeholder="<?=$ds['id'];?>">
                    <input type="text" class="form-control" id="formnama" name="formnama"
                        placeholder="<?=$ds['nama'];?>">
                    <input type="text" class="form-control" id="formalamat" name="formalamat"
                        placeholder="<?=$ds['alamat'];?>">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                <button type="submit" class="btn btn-primary">Simpan</button>
            </div>
        </form>
    </div>
</div>

Answer 1

Пожалуйста, попробуйте следующее. Вы можете разместить необходимые данные в качестве атрибутов внутри ссылки редактирования следующим образом. Здесь я поместил ваши данные в атрибуты data-id , data-name и data-alamat .

<a href="" data-target="#editprofile"  data-id="<?php echo $ds['id']; ?>" data-name="<?php echo $ds['nama'];?>" data-alamat="<?php echo $ds['alamat'];?>" data-toggle="modal" class="badge badge success">Edit Profile</a>

Когда ваше модальное всплывающее окно Показано, что вы можете получить свои данные и установить его в поля ввода внутри формы. Для этого вы можете указать селектор идентификатора, скажем profileForm для поля внутри вашего модального всплывающего окна, например,

<form id="profileForm" action="<?=base_url('admin/manajemen_akun');?>"    method="post">

Вы можете присвоить атрибут имени вашему скрытому полю. Здесь я дал name = " id "

  <input type="hidden" name="id" class="form-control" placeholder="<?=$ds['id'];?>">

В вашем файле javascript вы можете указать следующее.

$('#editprofile').on('show.bs.modal', function (e) {
  // get information to update quickly to modal 
 var opener=e.relatedTarget;//this holds the element who called the modal
 //get details from attributes
 var formnama=$(opener).attr('data-name');
 var formalamat=$(opener).attr('data-alamat');
 var id = $(opener).attr('data-id');

 //set it in form
 $('#profileForm').find('[name="formnama"]').val(formnama);
 $('#profileForm').find('[name="formalamat"]').val(formalamat);
 $('#profileForm').find('[name="id"]').val(id); // set id to hidden field whose name="id"

 });