Bagaimana Cara Menampilkan Data dari Combobox ke Textfield di PHP?

Dibuat
·
Diperbarui
·
Dilihat55 kali
0

Saya memiliki array PHP bernama students yang berisi data mahasiswa, untuk menyederhanakan, anggap saja itu hasil query dari database.

Saya ingin menampilkan data dari combo box dengan nama nim ke text field name dan major.

Jadi, semua input pada awalnya kosong, opsi combo box adalah nim dari semua students, pada saat saya memilih salah satu nim, saya ingin input text field name dan major terisi dan berubah secara otomatis sesuai dengan data nim yang dipilih.

Misalnya, jika nim 1321 dipilih, maka text field name harus terisi dengan Adi dan major harus terisi Teknik Informatika. Bagaimana caranya ya?

Berikut sampel kodenya:

<?php 

$students = [
  ["nim" => '1321', 'name' => 'Adi', 'major' => 'Teknik Informatika'],
  ["nim" => '2221', 'name' => 'Budi', 'major' => 'Sistem Informatika'],
  ["nim" => '3113', 'name' => 'Caca', 'major' => 'Teknik Mesin'],
  ["nim" => '4212', 'name' => 'Dodi', 'major' => 'Teknik Elektro'],
];

?>

<div>
  <label for="nim">NIM</label>
  <select name="nim" id="nim">
      <option disabled selected>-pilih-</option>
    <?php foreach ($students as $student) { ?>
      <option value="<?= $student['nim']; ?>">
        <?= $student['nim']; ?>
      </option>
    <?php } ?>
  </select>
</div>

<div>
  <label for="name">Nama</label>
  <input type="text" name="name" id="name">
</div>

<div>
  <label for="major">Jurusan</label>
  <input type="text" name="major" id="major">
</div>
PHPHTML
1 Jawaban
0

Bisa ditambahkan melalui JavaScript, kita bisa memasang listener onchange ke combobox untuk mendengarkan perubahan atau memicu kode tertentu ketika value combobox berubah.

Ketika terjadi perubahan, kita bisa menangkap nim yang baru saja dipilih kemudian melakukan pencarian terhadap array students, setelah ketemu, ubah value input name dan major.

Untuk mengubah array asosiatif ke array of object JavaScript atau JSON, bisa menggunakan fungsi PHP json_encode(), agar kita bisa memanipulasi data tersebut seperti halnya array JavaScript pada umumnya, dalam hal ini bisa menggunakan fungsi Array.find() untuk menemukan mahasiswa berdasarkan nim.

Kode yang sudah dimodifikasi (cek bagian JavaScript):

<?php  

$students = [
  ["nim" => '1321', 'name' => 'Adi', 'major' => 'Teknik Informatika'],
  ["nim" => '2221', 'name' => 'Budi', 'major' => 'Sistem Informatika'],
  ["nim" => '3113', 'name' => 'Caca', 'major' => 'Teknik Mesin'],
  ["nim" => '4212', 'name' => 'Dodi', 'major' => 'Teknik Elektro'],
];

?>

<div>
  <label for="nim">NIM</label>
  <select name="nim" id="nim">
      <option disabled selected>-pilih-</option>
    <?php foreach ($students as $student) { ?>
      <option value="<?= $student['nim']; ?>">
        <?= $student['nim']; ?>
      </option>
    <?php } ?>
  </select>
</div>

<div>
  <label for="name">Nama</label>
  <input type="text" name="name" id="name">
</div>

<div>
  <label for="major">Jurusan</label>
  <input type="text" name="major" id="major">
</div>

<script>
  const nimSelectInput = document.getElementById('nim');
  const nameInput = document.getElementById("name");
  const majorInput = document.getElementById("major");

  const studentsJson = <?= json_encode($students); ?>;
  
  nimSelectInput.addEventListener('change', (e) => {
    const selectedNim = e.target.value;
    const studentByNim = studentsJson.find(student => student.nim === selectedNim);
    nameInput.value = studentByNim.name;
    majorInput.value = studentByNim.major;
  })
</script>
Dibuat

Kamu tau jawabannya?

Ayo bergabung bersama lebih dari 200.000 pengguna lainnya!

Pertanyaan Terkait