view_violations.html

<!DOCTYPE html>
<html>
<head>
  <title>View Violations - Traffic Violation System</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="Frontend/css/dashboardDesign.css">
</head>

<body>
  <div class="container my-5">
    <h1>View Violations</h1>

    <form id="violationForm">
      <div class="form-group">
        <label for="vehicle_id">Enter Vehicle ID:</label>
        <input type="text" class="form-control" id="vehicle_id" name="vehicle_id" required>
      </div>
      <button type="submit" class="btn btn-primary mt-3">View Violations</button>
    </form>

    <div id="violation-table" class="mt-4">
      <!-- Results will be shown in view_violations_result.html -->
    </div>
  </div>

  <script>
    document.getElementById("violationForm").addEventListener("submit", function(event) {
      event.preventDefault(); // Prevent default form submission
      let vehicleID = document.getElementById("vehicle_id").value;
      if (vehicleID) {
        window.location.href = "view_violations_result.html?vehicle_id=" + encodeURIComponent(vehicleID);
      }
    });
  </script>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>