Desember 16, 2025
Siap ๐
Kita reset ke dasar dulu, tanpa AdminLTE, tanpa Bootstrap, tanpa PHP
→ HTML + JS murni sebagai SIMULASI PALING JELAS.
Kalau ini jalan (dan pasti jalan), nanti gampang kita adaptasi ke AdminLTE.
✅ CONTOH PALING SEDERHANA (WORK 100%)
๐น HTML
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Simulasi Form Edit</title>
<style>
input[readonly] {
background-color: #eee;
cursor: not-allowed;
}
</style>
</head>
<body>
<h3>Form Profil</h3>
<form id="formProfil">
<div>
<label>Nama</label><br>
<input type="text" name="nama" value="Abu Unais" readonly>
</div><br>
<div>
<label>Email</label><br>
<input type="email" name="email" value="abu@example.com" readonly>
</div><br>
<div>
<label>Alamat</label><br>
<textarea name="alamat" readonly>Pati, Jawa Tengah</textarea>
</div><br>
<button type="button" id="btnEdit">Edit</button>
<button type="submit" id="btnSimpan" disabled>Simpan</button>
</form>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
let editing = false;
$('#btnEdit').on('click', function () {
editing = !editing;
if (editing) {
$('#formProfil').find('input, textarea').prop('readonly', false);
$('#btnSimpan').prop('disabled', false);
$(this).text('Batal');
} else {
$('#formProfil').find('input, textarea').prop('readonly', true);
$('#btnSimpan').prop('disabled', true);
$(this).text('Edit');
}
});
</script>
</body>
</html>
๐งช CARA TES
- Copy SEMUA kode di atas
- Simpan sebagai:
test-form.html - Buka di Chrome / Firefox
- Klik Edit → input langsung bisa diketik
- Klik Batal → terkunci lagi
๐ง KENAPA CONTOH INI PASTI JALAN?
✔ Tidak ada CSS template yang mengganggu
✔ Tidak ada disabled pada input
✔ readonly hanya untuk input & textarea
✔ JS sangat minimal & jelas
๐ VERSI TANPA jQuery (JS MURNI)
Kalau mau versi vanilla JS, ini juga jalan:
<script>
let editing = false;
const btnEdit = document.getElementById('btnEdit');
const btnSimpan = document.getElementById('btnSimpan');
const inputs = document.querySelectorAll('#formProfil input, #formProfil textarea');
btnEdit.addEventListener('click', () => {
editing = !editing;
inputs.forEach(el => el.readOnly = !editing);
btnSimpan.disabled = !editing;
btnEdit.textContent = editing ? 'Batal' : 'Edit';
});
</script>
๐ฏ LANGKAH SELANJUTNYA (PENTING)
Setelah Anda mencoba contoh ini, jawab jujur:
๐ “Contoh ini bisa / tidak bisa?”
Kalau:
- ✅ BISA → masalah 100% dari AdminLTE
- ❌ TIDAK BISA → ada masalah browser / JS load
Dari situ saya bisa lanjutkan adaptasi PASTI BERHASIL ke AdminLTE tanpa muter-muter lagi.
0 komentar:
Posting Komentar