Input Form tertutup/terkunci
Javascript Buka dan Tutup Form – Sudah lama banget rasanya tidak posting di web ini. Untuk sharing kali ini kita akan membahas terkait potongan script javascript (JS) untuk mengaktikan dan menonaktifkan sebuah form input html.
Untuk bahasa istilahnya biasa kita kenal dengan istilah enable dan disable form input menggunakan javascript. Kebutuhan ini Saya buat ketika Saya akan membuat sebuah pilihan terhadap form yang akan di inputkan, yang mana form tersebut merupakan pilihan untuk pengguna aplikasi apakah mau menggunkan custom input atau inputan sesuai dengan buatan aplikasi.
Berikut javascriptnya:
<script type="text/javascript">function toggleReadOnly(n) {
var inputField = document.getElementById('custom');
var down = document.getElementById('lock');
inputField.readOnly = !inputField.readOnly;
if ( inputField.readOnly == true) {
down.innerHTML = '<strong>🔒</strong>';
}else{
down.innerHTML = '<strong>🔓</strong>';
}
} </script>
Script Html
<div class="input-group margin"> <input type="text" name="custom" id="custom" class="form-control" placeholder="abc" onKeyUp="o();" readonly> <span class="input-group-btn"> <span class="btn btn-default btn-flat" id="lock" onclick="toggleReadOnly()">🔒 </span> </div>
Penjelasan:
- 🔒 ini adalah icon gembok yang tertutup
- 🔓 ini adalah icon gembok yang terbuka
Dengan cara kerjanya yaitu: jika tombol atau icon gembok di klik maka form akan aktif atau enable dan logonya berganti dengan logo gembok terbuka.
Jika icon gembok dan logo tersebut di klik lagi makan form input akan terdisable lagi dan tertutup lagi.
Untuk fungsi form inputnya atau field inputnya ini adalah readonly dan buka disabled ya teman-teman.
Input form terbuka
Apa bedanya form yang readonly dan form input disable ?
bedanya adalah jika readonly form terkunci namun variabel atau name inputnya masih bisa di proses
Sedangkan input disabled adalah input form yang terkunci namun inputan ini di abaikan atau tidak akan di proses.
Demikian semoga bermanfaat.