Daftar dan Belajar Sekarang!

Saya tidak tahu cara memberi nilai atau set value ke select pada html lewat jquery

foto ilahana
2 Kontribusi 0 Coto
2 minggu yang lalu
jadi saya membuat sebuah program back-end pembayaran sekolah. untuk menambahkan data orangtua saya sudah bisa dengan menggunakan code php biasa dan sudah tersimpan di database. namun ketika saya ingin edit data orangtua saya sediki kesulitan karena tampilan untuk menambah dan edit data menggunakan satu tampilan yang sama. berikut tampilan programnya https://i.ibb.co/F7WX8sQ/Screenshot-4.png https://i.ibb.co/GpqYjY5/Screenshot-5.png untuk codenya saya mengkombinasikan php dengan jquery. yang ingin saya lakukan adalah gimana caranya mengisi semua value input melalui jquery terutama dibagian input-an select? berikut syntax codenya: 1. code pada tabel data orang tua
<tbody>
   <?php
        $ortu = _getClass('Orangtua')->read_data();
        $no = 1;
        for($i=0;$i<count($ortu);$i++){?>
            <tr>
            <td><?= $no++?></td>
            <td><?= $ortu[$i]['nama_ayah']?></td>
            <td><?= $ortu[$i]['nama_ibu']?></td>
            <td><?= $ortu[$i]['username'] ?></td>
            <td>
                <button class="btn btn-xs btn-info btn-edit-kls" 
                   onclick="editortu('<?=$ortu[$i]['id_orang_tua']?>')" data-sidepanel- 
                   toggle=".app-sidepanel" name="btnedit" type="submit">
                   <span class="fa fa-edit"></span>
                </button>
            </td>
            </tr>
   <?php }?>
</tbody>
2. code pada tampilan edit dan tambah
<form action="" class="form-horizontal" method="POST">
            <div class="container">
                <input type="hidden" name="idortu" id="idortu">
                <div class="form-group">
                    <label>Nama Ayah</label>
                    <input name="ayah" type="text" id="ayah" class="form-control">
                </div>
                <div class="form-group">
                    <label>Nama Ibu</label>
                    <input name="ibu" type="text" id="ibu" class="form-control">
                </div>
                <div class="form-group">
                    <label>Siswa</label>
                    <div class="app-widget-tile">
                        <label for="">Kelas</label>
                        <select class="bs-select" onchange="carisiswa()" id="kelas1" name="kelas">
                            <option value=""></option>
                            <?php
                            // require 'pdo/Orangtua.php';
                            $ortu = new Orangtua();
                            $kelas = $ortu->read_kelas();
                                // $siswa = _getClass('Orangtua')->read();
                                for ($i=0; $i < count($kelas); $i++) { 
                            ?>
                            <option value="<?= $kelas[$i]['id_kelas']?>"><?= $kelas[$i]['kelas']?></option>
                            <?php } ?>
                        </select>
                        <label for="">Nama Siswa</label>
                        <select class="form-control" data-live-search="true" id="siswa1" name="siswa">
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label>Username</label>
                    <input name="username" type="text" id="user" class="form-control">
                </div>
                <div class="form-group">
                    <label>Password</label>
                    <input name="password" type="Password" id="pass" class="form-control">
                </div>
                <div class="form-group">
                    <input type="submit" name="btnSimpan" class="btn btn-info" value="Simpan">
           </div>
      </div>
</form>
3. code jquery
function editortu(id) {
    console.log(id);
    $.ajax({
        type: "post",
        url: "pdo/perantara.php",
        data: {
            req : 'ortu',
            idortu : id
        },
        dataType: "json",
        success: function (response) {
            console.log(response);
            $.each(response, function (i, data) { 
                $('#idortu').val(data.id_orang_tua);
                $('#ayah').val(data.nama_ayah);
                $('#ibu').val(data.nama_ibu);
                $('#kelas1').val(data.id_kelas);
                $('#siswa1').val(data.nis);
                $('#user').val(data.username);
                $('#pass').val(data.password);
            });
        }
    });
}

Tag: html jquery php

✔ Forum ini sudah terjawab


Jawaban
foto dianarifr
626 Kontribusi 294 Coto
2 minggu yang lalu
coba ini
$('#kelas1').val(data.id_kelas).trigger('change');
$('#siswa1').val(data.nis).trigger('change');
answered icon
foto dianarifr
626 Kontribusi 294 Coto
2 minggu yang lalu
coba ini
$('#kelas1').val(data.id_kelas).trigger('change');
$('#siswa1').val(data.nis).trigger('change');

foto ilahana
2 Kontribusi 0 Coto
2 minggu yang lalu
select yang pertama memilih kelas
<label for="">Kelas</label>
                        <select class="bs-select" onchange="carisiswa()" id="kelas1" name="kelas">
                            <option value=""></option>
                            <?php
                            // require 'pdo/Orangtua.php';
                            $ortu = new Orangtua();
                            $kelas = $ortu->read_kelas();
                                // $siswa = _getClass('Orangtua')->read();
                                for ($i=0; $i < count($kelas); $i++) { 
                            ?>
                            <option value="<?= $kelas[$i]['id_kelas']?>"><?= $kelas[$i]['kelas']?></option>
                            <?php } ?>
                        </select>
select yang kedua memilih nama siswa
<label for="">Nama Siswa</label>
                        <select class="form-control" data-live-search="true" id="siswa1" name="siswa">
                        </select>
pada select tidak ada option, karena sebelum select pertama dipilih maka select dua belum ada isinya. lebih mudahnya saya menggunakan dinamik select. kalau semisal saya memakai code yang diusulkan dianarifr. apakah nanti pilihannya atau optionnya cuma satu doang? soalnya belum ada pilihannya sebelum select satu menjalankan event onchange
  • iyaa bang akan menjadi satu saja.. - ghonijee
  • iya cuma satu, kalau mau tampil yg lain. ambil dulu data untuk select kedua - dianarifr
  • ok makasih gan - ilahana

foto ghonijee
31 Kontribusi 21 Coto
2 minggu yang lalu
Saya pernah mengalami hal demikian bang.. dan saya membuat sedikit trik untuk mengakalinya wkwkwkw... jadi saya membuat 2 form, lebih tepatnya saya copy form input dan saya rubah id formnya. selanjutnya ketika event button click di tambah data, saya memanggil form yang id-nya tambah data... begitu juga untuk edit.. jadi nanti tidak ribet ketika mau action submit formnya. kalo kamu pakai dinamik select box yaa pakai ajax aja lagi sama seperti form input, kan select box pertama sudah mempunyai nilai, jadi tinggal buat ajaxnya, sekalian untuk data select box kedua.. semoga membantu ..


Login untuk diksusi di forum sekolah koding