I’m still a novice programmer. This is my modal; I’ve tried a lot of different approaches, but it simply shows the background. I tried manually on the console as well, but it didn’t work. This modal aim is to update the customer’s information.
<!-- Modal Edit Bahagian -->
<div class="modal fade" id="modal-edit-bahagian" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Edit Bahagian</h4>
</div>
<div class="modal-body">
<form id="formEditBahagian" method="post">
<input type="hidden" id="nama_pemohon" name="nama_pemohon">
<div class="form-group">
<label for="edit-kategori-permohon" style="font-weight: bold;">Kategori Pemohon</label>
<select id="edit-kategori-permohon" name="edit-kategori-permohon" required="required" class="form-control">
<option value="">- Sila Pilih -</option>
<option value="Jabatan Negeri">Jabatan Negeri</option>
<option value="Jabatan Persekutuan">Jabatan Perseketuan</option>
<option value="Sekolah-sekolah">Sekolah-sekolah</option>
<option value="Swasta">Swasta</option>
<option value="NGO">NGO</option>
</select>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-6">
<label for="edit-gelaran-ketua-jabatan">Gelaran Ketua Jabatan</label>
<input class="form-control" type="text" id="edit-gelaran-ketua-jabatan" name="edit-gelaran-ketua-jabatan" required>
<small id="edit-gelaranError" style="display:none; color:red;"></small>
</div>
<div class="col-md-6">
<label for="edit-agensi">Agensi</label>
<input class="form-control" type="text" id="edit-agensi" name="edit-agensi" required>
<small id="edit-agensiError" style="display:none; color:red;"></small>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-6">
<label for="edit-bahagian">Bahagian</label>
<input class="form-control" type="text" id="edit-bahagian" name="edit-bahagian" required>
<small id="edit-bahagianError" style="display:none; color:red;"></small>
</div>
<div class="col-md-6">
<label for="edit-nama-ketua-jabatan">Nama Ketua Jabatan</label>
<input class="form-control" type="text" id="edit-nama-ketua-jabatan" name="edit-nama-ketua-jabatan" required>
<small id="edit-namaketuaError" style="display:none; color:red;"></small>
</div>
</div>
</div>
<div class="form-group">
<label for="edit-alamat">Alamat Penuh</label>
<textarea id="edit-alamat" name="edit-alamat" class="form-control" rows="3" required></textarea>
</div>
<div class="form-group">
<label for="edit-nama-pemohon">Nama Pemohon</label>
<input class="form-control" type="text" id="edit-nama-pemohon" name="edit-nama-pemohon" required>
<small id="edit-namapemohonError" style="display:none; color:red;"></small>
</div>
<div class="form-group">
<label for="edit-jawatan-pemohon">Jawatan Pemohon</label>
<input class="form-control" type="text" id="edit-jawatan-pemohon" name="edit-jawatan-pemohon" required>
<small id="edit-jawatanError" style="display:none; color:red;"></small>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-6">
<label for="edit-tel-pejabat">No. Telefon Pejabat</label>
<small style="font-size:13px; color: blue; font-style: italic;">*(Format: 03-61365652)</small>
<input class="form-control" type="tel" id="edit-tel-pejabat" name="edit-tel-pejabat" required>
<small id="edit-telpejabatError" style="display:none; color:red;"></small>
</div>
<div class="col-md-6">
<label for="edit-tel-pengguna">No. Telefon Bimbit</label>
<small style="font-size:13px; color: blue; font-style: italic;">*(Format: 012-70442695)</small>
<input class="form-control" type="tel" id="edit-tel-pengguna" name="edit-tel-pengguna" required>
<small id="edit-telpengunaError" style="display:none; color:red;"></small>
</div>
</div>
</div>
<div class="form-group">
<label for="edit-email">Email</label>
<small style="font-size:13px; color: blue; font-style: italic;">*(Format: [email protected])</small>
<input class="form-control" type="email" id="edit-email" name="edit-email" required>
<small id="edit-emailError" style="display:none; color:red;"></small>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Tutup</button>
<button type="submit" form="formEditBahagian" class="btn btn-primary">Simpan</button>
</div>
</div>
</div>
</div>
Below here is the javascript that makes the modal appears but it didn’t. Can you guys please check the problem here. I think the problem lies on how i did the javascript.
<script>
// Log out functionality
$("#sign-out").click(function() {
$.ajax({
url: "proc_files/proc-logout.php",
success: function(result) {
window.location.href = '../../';
}
});
});
$(document).ready(function() {
// Initialize DataTable
$('#tbl_bahagian_selenggara').DataTable();
// Debug click handler
$(document).on('click', '[onclick^="papar_tindakan_edit_bahagian"]', function() {
console.log('Edit button clicked');
});
});
function papar_tindakan_edit_bahagian(nama_pemohon) {
console.log('Function called with nama_pemohon:', nama_pemohon);
// First show the modal
$('#modal-edit-bahagian').modal({
backdrop: 'static',
keyboard: false,
show: true
});
// Then fetch the data
$.ajax({
url: 'bahagian_details.php',
type: 'POST',
data: { nama_pemohon: nama_pemohon },
dataType: 'json',
success: function(data) {
if (data.error) {
alert('Error: ' + data.error);
return;
}
// Populate the form fields
$('#nama_pemohon').val(data.nama_pemohon);
$('#edit-kategori-permohon').val(data.kategori_permohon);
$('#edit-bahagian').val(data.bahagian);
$('#edit-gelaran-ketua-jabatan').val(data.gelaran_ketua_jabatan);
$('#edit-agensi').val(data.agensi);
$('#edit-nama-ketua-jabatan').val(data.nama_ketua_jabatan);
$('#edit-alamat').val(data.alamat_pengguna);
$('#edit-nama-pemohon').val(data.nama_pemohon);
$('#edit-nokp-pemohon').val(data.nokp_pemohon);
$('#edit-jawatan-pemohon').val(data.jawatan_pemohon);
$('#edit-tel-pejabat').val(data.tel_pejabat);
$('#edit-tel-pengguna').val(data.tel_pengguna);
$('#edit-no-faks').val(data.no_faks);
$('#edit-email').val(data.email_pengguna);
},
error: function(xhr, status, error) {
console.log('XHR:', xhr.responseText);
console.log('Status:', status);
console.log('Error:', error);
alert('Error fetching details. Please check the console for more information.');
}
});
}
function tambah_tempahan(x) {
$("#modal-tambah-tempahan").modal('show');
}
// Form submission handling
document.getElementById('formTempahan').onsubmit = function(event) {
event.preventDefault();
// Reset all error messages
resetErrorMessage('gelaranError');
resetErrorMessage('agensiError');
resetErrorMessage('namaketuaError');
resetErrorMessage('namapermohonError');
resetErrorMessage('kataError');
resetErrorMessage('kpError');
resetErrorMessage('jawatanpemohonError');
resetErrorMessage('telbimbitError');
resetErrorMessage('telpejabatError');
resetErrorMessage('emailError');
resetErrorMessage('faksError');
let hasError = false;
// Password validation
const password = document.getElementById('kata-laluan').value;
const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[W_]).{12,20}$/;
if (!password || !passwordRegex.test(password)) {
showError('kataError', '*Katalaluan mesti mengandungi sekurang-kurangnya 1 huruf besar, 1 huruf kecil, 1 nombor, 1 simbol dan panjang 12-20 karakter!');
hasError = true;
}
// Validation for text-only fields (no numbers)
const textOnlyFields = [
{ id: 'gelaran-ketua-jabatan', error: 'gelaranError', label: 'Gelaran Ketua Jabatan' },
{ id: 'agensi', error: 'agensiError', label: 'Agensi' },
{ id: 'nama-ketua-jabatan', error: 'namaketuaError', label: 'Nama Ketua Jabatan' },
{ id: 'bahagian', error: 'bahagianError', label: 'Bahagian' }
];
const textOnlyRegex = /^[a-zA-Zs-.'()]+$/;
textOnlyFields.forEach(field => {
const input = document.getElementById(field.id);
if (input) {
const value = input.value.trim();
if (!value || !textOnlyRegex.test(value)) {
showError(field.error, `*${field.label} hanya boleh mengandungi huruf sahaja!`);
hasError = true;
}
}
});
// Kad Pengenalan validation
const nokppermohon = document.getElementById('no-nokp-permohon').value.trim();
const nokppermohonRegex = /^d{12}$/; // Ensure exactly 12 digits
if (!nokppermohon || !nokppermohonRegex.test(nokppermohon)) {
showError('kpError', '*Nombor kad pengenalan permohon hanya mengandungi angka dan 12 digit sahaja!');
hasError = true;
}
// Nama validation
const namapermohon = document.getElementById('nama-permohon').value;
const namapermohonRegex = /^[a-zA-Zs]*$/;
if (!namapermohon || !namapermohonRegex.test(namapermohon)) {
showError('namapermohonError', '*Nama permohon hanya boleh mengandungi huruf sahaja!');
hasError = true;
}
// Email validation
const email = document.getElementById('email').value;
const emailRegex = /^[^s@]+@[^s@]+.[^s@]+$/;
if (!email || !emailRegex.test(email)) {
showError('emailError', '*Format email yang dimasukkan adalah salah!');
hasError = true;
}
// Jawatan validation
const jawatanpermohon = document.getElementById('jawatan-permohon').value;
const jawatanpermohonRegex = /^[a-zA-Zs]*$/;
if (!jawatanpermohon || !jawatanpermohonRegex.test(jawatanpermohon)) {
showError('jawatanpemohonError', '*Jawatan hanya boleh mengandungi huruf sahaja!');
hasError = true;
}
// Phone number validation (Mobile)
const telefonbimbit = document.getElementById('no-telefonbim').value.trim();
const telefonbimbitRegex = /^d{3}-d{7}$/;
if (!telefonbimbit || !telefonbimbitRegex.test(telefonbimbit)) {
showError('telbimbitError', '*Format telefon bimbit tidak sah. Gunakan format: 012-7044269');
hasError = true;
}
// Phone number validation (Office)
const telefonpej = document.getElementById('no-telefonpej').value.trim();
const telefonpejRegex = /^d{3}-d{7}$/;
if (!telefonpej || !telefonpejRegex.test(telefonpej)) {
showError('telpejabatError', '*Format telefon pejabat tidak sah. Gunakan format: 012-7044269');
hasError = true;
}
// Faks validation
const nofaks = document.getElementById('no-faksimili').value.trim();
const nofaksRegex = /^d{2}-d{7}$/;
if (!nofaks || !nofaksRegex.test(nofaks)) {
showError('faksError', '*Format faksimili tidak sah. Gunakan format: 02-7044269');
hasError = true;
}
// If validation passes, submit form via AJAX
if (!hasError) {
// Show confirmation modal
$('#pengesahan-simpan-tindakan-kosong-tarikh').modal('show');
// Handle confirmation button click
$("#btnSetuju").off('click').on('click', function() {
// Show loading overlay
$.LoadingOverlay("show");
// Get form data
const formData = new FormData(document.getElementById('formTempahan'));
// Submit form via AJAX
$.ajax({
url: 'Php-files-admin/insert_bahagian_pendaftaran.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
dataType: 'json',
success: function(response) {
if (response.success) {
// Hide confirmation modal
$('#pengesahan-simpan-tindakan-kosong-tarikh').modal('hide');
// Show success message
$('#msg-berjaya').modal('show');
// Close form modal
$('#modal-tambah-tempahan').modal('hide');
// Reload page after short delay
setTimeout(function() {
location.reload();
}, 1500);
} else {
// Hide confirmation modal
$('#pengesahan-simpan-tindakan-kosong-tarikh').modal('hide');
// Show error message
$('#text-tidak-berjaya').text(response.message || 'Maklumat tidak berjaya disimpan.');
$('#msg-tidak-berjaya').modal('show');
}
},
error: function(xhr, status, error) {
// Hide confirmation modal
$('#pengesahan-simpan-tindakan-kosong-tarikh').modal('hide');
// Show error message
$('#text-tidak-berjaya').text('Error: ' + error);
$('#msg-tidak-berjaya').modal('show');
},
complete: function() {
// Hide loading overlay
$.LoadingOverlay("hide");
}
});
});
// Handle cancel button click
$("#btnTidakSetuju").off('click').on('click', function() {
$('#pengesahan-simpan-tindakan-kosong-tarikh').modal('hide');
});
}
};
// Character counter for textarea
const alamatTextarea = document.getElementById('alamat');
const charCount = document.getElementById('charCount');
const maxLength = 150;
alamatTextarea.addEventListener('input', function() {
const currentLength = this.value.length;
const remaining = maxLength - currentLength;
charCount.textContent = remaining + ' characters remaining'
if (remaining <= 0) {
this.value = this.value.substring(0, maxLength);
charCount.textContent = '0 characters remaining';
}
});
// Helper function to reset error messages
function resetErrorMessage(elementId) {
const element = document.getElementById(elementId);
element.textContent = '';
element.style.display = 'none';
}
// Helper function to display error messages
function showError(elementId, message) {
const element = document.getElementById(elementId);
element.textContent = message;
element.style.display = 'block';
}
// Get the input elements
const nokpInput = document.getElementById('no-nokp-permohon');
const idPenggunaInput = document.getElementById('id-pengguna');
// Add event listener for input changes
nokpInput.addEventListener('input', function() {
// Copy the value from nokp to id pengguna
idPenggunaInput.value = this.value;
// Disable the id pengguna input
idPenggunaInput.readOnly = true;
});
// Initialize on page load
window.addEventListener('load', function() {
// Disable the id pengguna input if nokp has a value
if (nokpInput.value) {
idPenggunaInput.value = nokpInput.value;
idPenggunaInput.readOnly = true;
}
});
</script>
And down here is the php files
<?php
session_start();
include 'security/connection.php';
header('Content-Type: application/json');
if (!isset($_POST['nama_pemohon'])) {
echo json_encode(['error' => 'nama_pemohon is required']);
exit;
}
$nama_pemohon = $_POST['nama_pemohon'];
// Add error reporting
error_reporting(E_ALL);
ini_set('display_errors', 1);
// Check connection first
if (!$conn) {
echo json_encode(['error' => 'Database connection failed: ' . mysqli_connect_error()]);
exit;
}
// SQL query to select data
$sql = "SELECT
kategori_permohon,
bahagian,
gelaran_ketua_jabatan,
agensi,
nama_ketua_jabatan,
alamat_pengguna,
nama_pemohon,
nokp_pemohon,
jawatan_pemohon,
tel_pejabat,
tel_pengguna,
no_faks,
email_pengguna
FROM db_tempahan_pdi.daftar_pengguna
WHERE status_bahagian = '1'
AND nama_pemohon = ?";
// Use prepared statement
$stmt = mysqli_prepare($conn, $sql);
if (!$stmt) {
echo json_encode(['error' => 'Query preparation failed: ' . mysqli_error($conn)]);
exit;
}
// Bind parameters
mysqli_stmt_bind_param($stmt, "s", $nama_pemohon);
// Execute the statement
if (!mysqli_stmt_execute($stmt)) {
echo json_encode(['error' => 'Query execution failed: ' . mysqli_stmt_error($stmt)]);
exit;
}
// Get the result
$result = mysqli_stmt_get_result($stmt);
if (!$result) {
echo json_encode(['error' => 'Failed to get result: ' . mysqli_error($conn)]);
exit;
}
$row = mysqli_fetch_assoc($result);
if ($row) {
echo json_encode($row);
} else {
echo json_encode(['error' => 'No data found for nama_pemohon: ' . $nama_pemohon]);
}
mysqli_stmt_close($stmt);
mysqli_close($conn);
?>
Please help me on solving this issue