| Server IP : 69.72.244.102 / Your IP : 216.73.216.164 Web Server : LiteSpeed System : Linux s3434.fra1.stableserver.net 4.18.0-513.24.1.lve.2.el8.x86_64 #1 SMP Fri May 24 12:42:50 UTC 2024 x86_64 User : konzalta ( 1271) PHP Version : 7.4.33 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/konzalta/gikuyu.online/egov/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Data Form</title>
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h2>Add Data</h2>
<form id="addDataForm">
<div class="form-group">
<label for="wardSelect">Ward:</label>
<select class="form-control" id="wardSelect" name="ward">
<!-- Options will be populated dynamically -->
</select>
</div>
<div class="form-group">
<label for="locationSelect">Location:</label>
<select class="form-control" id="locationSelect" name="location">
<!-- Options will be populated dynamically based on selected ward -->
</select>
</div>
<div class="form-group">
<label for="issueTextarea">Issue:</label>
<textarea class="form-control" id="issueTextarea" rows="3" name="issue"></textarea>
</div>
<div class="form-group">
<label for="statusSelect">Status:</label>
<select class="form-control" id="statusSelect" name="status">
<option value="Open">Open</option>
<option value="In Progress">In Progress</option>
<option value="Resolved">Resolved</option>
</select>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Add Data</button>
<button type="button" class="btn btn-secondary" id="editUpdateBtn" style="display: none;">Edit/Update</button>
<button type="button" class="btn btn-success" id="shareBtn">Share via WhatsApp</button>
</div>
</form>
</div>
<!-- Bootstrap JS and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Your custom script -->
<script>
// Example data for dropdowns
var wards = [
{ id: 1, name: 'Ward A' },
{ id: 2, name: 'Ward B' },
{ id: 3, name: 'Ward C' }
];
var locations = {
1: ['Location 1A', 'Location 1B', 'Location 1C'],
2: ['Location 2A', 'Location 2B', 'Location 2C'],
3: ['Location 3A', 'Location 3B', 'Location 3C']
};
// Populate ward dropdown
$(document).ready(function() {
var wardSelect = $('#wardSelect');
wards.forEach(function(ward) {
wardSelect.append('<option value="' + ward.id + '">' + ward.name + '</option>');
});
});
// Update location dropdown based on selected ward
$('#wardSelect').change(function() {
var wardId = $(this).val();
var locationSelect = $('#locationSelect');
locationSelect.empty();
locations[wardId].forEach(function(location) {
locationSelect.append('<option value="' + location + '">' + location + '</option>');
});
});
// Form submission handler (you should handle form submission with AJAX to your backend)
$('#addDataForm').submit(function(event) {
event.preventDefault();
var formData = $(this).serialize();
console.log(formData); // You can send this data to your backend using AJAX
});
// Edit/Update button click handler (to show/hide buttons based on action)
$('#editUpdateBtn').click(function() {
// Implement edit/update logic here
});
// Share via WhatsApp button click handler (you can implement sharing logic here)
$('#shareBtn').click(function() {
// Implement sharing via WhatsApp logic here
});
</script>
</body>
</html>