Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Saya tidak tahu cara memberi nilai atau set value ke select pada html lewat jquery
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
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);
});
}
});
}
3 Jawaban:
Jawaban Terpilih
coba ini <pre> $('#kelas1').val(data.id_kelas).trigger('change'); $('#siswa1').val(data.nis).trigger('change'); </pre>
select yang pertama memilih kelas <pre> <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> </pre>
select yang kedua memilih nama siswa <pre> <label for="">Nama Siswa</label> <select class="form-control" data-live-search="true" id="siswa1" name="siswa"> </select> </pre>
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
Tanggapan
iyaa bang akan menjadi satu saja..
iya cuma satu, kalau mau tampil yg lain. ambil dulu data untuk select kedua
ok makasih gan
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 ..