Postingan lainnya
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>