Postingan lainnya
Masalah Combo box bertingkat tidak tampil data ke combo box nya saat menggunakan Ajax dan Jquery
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="header">
<h2>Form Tambah Siswa</h2>
</div>
<div class="body">
<form id="form_validation" name="form_tambah_materi" method="POST" enctype="multipart/form-data">
<label for="">Judul Materi</label>
<div class="form-group form-float">
<div class="form-line">
<input type="text" class="form-control" name="nama_siswa" required>
</div>
</div>
<label for="">Kelas</label>
<div class="form-group">
<div class="form-line">
<select name="kelas" id="kelas_js" class="form-control show-tick" required>
<option value="">-- Pilih Kelas --</option>
<?php
$database_kelas = $koneksi->query("SELECT * FROM tbl_kelas ORDER BY ID_KELAS") or die(mysqli_error($koneksi));
while ($data_kelas = $database_kelas->fetch_assoc()) { ?>
<option value="<?php echo $data_kelas['ID_KELAS'] ?>"><?php echo $data_kelas['KELAS'] ?></option>
<?php } ?>
</select>
</div>
</div>
<label for="">Mata Pelajaran</label>
<div class="form-group">
<div class="form-line">
<select name="id_mapel" id="id_mapel_js" class="form-control show-tick" required>
<option value="">-- Pilih Mata Pelajaran --</option>
</select>
</div>
</div>
<label for="">Pengajar</label>
<div class="form-group form-float">
<div class="form-line">
<input type="text" class="form-control" name="nama_siswa" required>
</div>
</div>
<label for="">Foto</label>
<div class="form-group form-float">
<div class="form-line">
<input type="file" class="form-control" name="foto" required>
</div>
<span style="color:#F44336 ">*Tipe file JPG/JPEG dan Size maks : 2MB</span>
</div>
<input type="submit" name="simpan" value="Simpan" class="btn btn-success">
<input type="button" value="Batal" onclick="self.history.back()" class="btn btn-primary">
</form>
</div>
</div>
</div>
</div>
<!-- jquery v1.12.4 --><script src="plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
jQuery('#kelas_js').change(function() {
var var_kelas = jQuery(this).val();
jQuery.ajax({
type: 'post',
url: 'ajax.php',
data: 'kelasajax=' + var_kelas,
success: function(result) {
jQuery('#id_mapel_js').html(result);
}
});
});
});
****************************************************************
<?php
$koneksi = mysqli_connect("localhost", "root", "amerika1999", "db_e-learning") or die("KONEKSI GAGAL TERHUBUNG");
$Ajax_kelas = $_POST['kelasajax'];
if (isset($_POST['kelasajax'])) {
$database_mapel = $koneksi->query("SELECT * FROM tbl_mapel where ID_KELAS ='$Ajax_kelas'") or die(mysqli_error($koneksi));
$jumlah = $database_mapel->num_rows;
if ($jumlah > 0) {
while ($tampil_data_mapel = $database_mapel->fetch_assoc()) {
echo '<option value="' . $tampil_data_mapel['ID_MAPEL'] . '" >' . $tampil_data_mapel['MAPEL'] . '</option>';
}
} else {
echo '<option value="">- Mata Pelajaran Belum Tersedia -</option>';
}
}
Ketika di console.log data ada. tapi di combobox mata pelajaran tidak ada data nya
Tanggapan
coba lihat kode kamu lagi. sulit dibaca. Biasakan menampilkan kode sebagai kode, bukan screeenshot gambar. coba diedit aja mas
Sudah saya ubah jadi source code nya
mohon bantuan nya ya mas
coba kamu console.log dulu dibagian var_kelas ada ngga isinya?
ada isi nya waktu di console.log
2 Jawaban:
<div>Gambarnya kecil sekali.<br><br>Secara garis besar harusnya sudah ok untuk sisi clientnya.<br>Karena untuk menambahkan option ke select dengan cara tersebut bisa.<br><br>Mungkin bisa dicoba dulu pakai static response, seperti dibawah.<br><br>ajax.php</div><pre><?php echo '<option value="1">IPA</option>'; echo '<option value="2">IPS</option>'; echo '<option value="3">Economy</option>'; ?></pre><div><br>theform.html</div><pre><!DOCTYPE html> <html> <head> <title>Fill Select Element</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha512-rO2SXEKBSICa/AfyhEK5ZqWFCOok1rcgPYfGOqtX35OyiraBg6Xa4NnBJwXgpIRoXeWjcAmcQniMhp22htDc6g==" crossorigin="anonymous" /> </head> <body> <div class="container"> <form> <label for="">Mata Pelajaran</label> <div class="form-group"> <div class="form-line"> <select name="id_mapel" id="id_mapel_js" class="form-control show-tick" > <option value="">-- Pilih Mata Pelajaran --</option> </select> </div> </div> </form> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" integrity="sha512-jGsMH83oKe9asCpkOVkBnUrDDTp8wl+adkB2D+//JtlxO4SrLoJdhbOysIFQJloQFD+C4Fl1rMsQZF76JjV0eQ==" crossorigin="anonymous" ></script> <script> jQuery.ajax({ type: "post", url: "ajax.php", success: function (result) { console.log(result); $(result).appendTo("#id_mapel_js"); }, }); </script> </body> </html></pre><div><br>-------<br><br>Asumsi pemanggilan ajax-nya sukses.<br><br>kalau pakai appendTo.</div><pre>$(result).appendTo("#id_mapel_js");</pre><div><br>kalau pakai append.</div><pre>$("#id_mapel_js").append(result);</pre>
Tanggapan
tidak bisa mas, sudah saya coba
Mungin bisa di-share apa isi result dari pemanggilan ajax-nya.
<div><figure data-trix-attachment="{"contentType":"image/png","filename":"hasil console.log result.PNG","filesize":69065,"height":848,"url":"https://i.ibb.co/W2NKbYD/hasil-console-log-result.png","width":1918}" data-trix-content-type="image/png" data-trix-attributes="{"caption":"ini hasil console.log result dari pemanggilan ajax nya","presentation":"gallery"}" class="attachment attachment--preview attachment--png"><img src="https://i.ibb.co/W2NKbYD/hasil-console-log-result.png" width="1918" height="848"><figcaption class="attachment__caption attachment__caption--edited">ini hasil console.log result dari pemanggilan ajax nya</figcaption></figure></div>
Tanggapan
tanggapannya dijawaban atas.