Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
Laravel: menampilkan value dari database ke input text berdasarkan onchange select option
Jadi saya mau menampilkan input text nama_alat, status dan kondisi berdasarkan onchange no_alat. Ada masalah di valuenya, dimana cuma bisa menampilkan nama_alat aja di semua input text. Nah supaya semua input text bisa menampilkan sesuai dengan datanya masing-masing gimana ya?
<select class="form-control" id="no_alat" name="no_alat" onchange="jselect()" required autofocus>
@foreach($peralatan as $alat)
<option id="{{$alat->no_alat}}" value="{{ $alat-> nama_alat}}">{{$alat->no_alat}}</option>
<script type="text/javascript">
function jselect() {
var nama_alat = document.getElementById("no_alat").value;
document.getElementById("nama_alat").value=nama_alat;
var kondisi = document.getElementById("no_alat").value;
document.getElementById("kondisi").value=kondisi;
var status = document.getElementById("no_alat").value;
document.getElementById("status").value=status;
}
</script>
@endforeach
</select>
2 Jawaban:
<pre> var nama_alat = document.getElementById("{{$alat->no_alat}}").value; // dst </pre>
Tanggapan
bukan gitu mas maksudnya.. kalau gitu yang outputnya malah no_alat semua
Jawaban Terpilih
SOLVED!
select-option:
<pre>
<select class="form-control" id="no_alat" name="no_alat" required autofocus>
@foreach($peralatan as $alat)
<option id="alat-{{$alat->id}}" value="{{$alat->id}}"
data-nama="{{$alat->nama_alat}}"
data-status="{{$alat->status}}"
data-kondisi="{{$alat->kondisi_akhir}}">{{ $alat->no_alat }}</option>
@endforeach
</select>
</pre>
javascript:
<pre> <script type="text/javascript"> window.onload = function(){ $("#no_alat").change(function () { var ambilNama = $("#alat-"+this.value).data('nama'); var ambilStatus = $("#alat-"+this.value).data('status'); var ambilKondisi = $("#alat-"+this.value).data('kondisi'); $("#nama_alat").val(ambilNama); $("#status").val(ambilStatus); $("#kondisi").val(ambilKondisi); }); } </script> </pre>