<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Reservation Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.form-container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
width: 300px;
}
.form-container h2 {
margin-top: 0;
}
.form-container label {
display: block;
margin: 10px 0 5px;
}
.form-container input, .form-container select {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
.form-container button {
background-color: #28a745;
color: #fff;
border: none;
padding: 10px;
border-radius: 4px;
cursor: pointer;
width: 100%;
}
.form-container button:hover {
background-color: #218838;
}
.error {
color: #dc3545;
font-size: 0.9em;
}
</style>
</head>
<body>
<div class="form-container">
<h2>Online Reservation</h2>
<form id="reservationForm">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" required>
<label for="departure">Departure City:</label>
<input type="text" id="departure" name="departure" required>
<label for="destination">Destination City:</label>
<input type="text" id="destination" name="destination" required>
<label for="departureDate">Departure Date:</label>
<input type="date" id="departureDate" name="departureDate" required>
<label for="returnDate">Return Date:</label>
<input type="date" id="returnDate" name="returnDate">
<label for="seatClass">Seat Class:</label>
<select id="seatClass" name="seatClass" required>
<option value="">Select Class</option>
<option value="economy">Economy</option>
<option value="business">Business</option>
<option value="first">First Class</option>
</select>
<button type="submit">Submit Reservation</button>
<div id="errorMessages" class="error"></div>
</form>
</div>
<script>
document.getElementById('reservationForm').addEventListener('submit',
function(event) {
event.preventDefault();
const name = document.getElementById('name').value.trim();
const email = document.getElementById('email').value.trim();
const phone = document.getElementById('phone').value.trim();
const departure = document.getElementById('departure').value.trim();
const destination =
document.getElementById('destination').value.trim();
const departureDate = document.getElementById('departureDate').value;
const returnDate = document.getElementById('returnDate').value;
const seatClass = document.getElementById('seatClass').value;
const errorMessages = [];
// Validation
if (!name) {
errorMessages.push('Full Name is required.');
}
if (!email || !/^\S+@\S+\.\S+$/.test(email)) {
errorMessages.push('Valid Email is required.');
}
if (!phone || !/^\d{10}$/.test(phone)) {
errorMessages.push('Phone Number must be 10 digits.');
}
if (!departure) {
errorMessages.push('Departure City is required.');
}
if (!destination) {
errorMessages.push('Destination City is required.');
}
if (!departureDate) {
errorMessages.push('Departure Date is required.');
}
if (returnDate && new Date(returnDate) < new Date(departureDate)) {
errorMessages.push('Return Date must be after Departure Date.');
}
if (!seatClass) {
errorMessages.push('Seat Class is required.');
}
const errorContainer = document.getElementById('errorMessages');
if (errorMessages.length > 0) {
errorContainer.innerHTML = errorMessages.join('<br>');
} else {
errorContainer.innerHTML = '';
alert('Reservation submitted successfully!');
// Normally here you would submit the form data to the server
// For this example, we just reset the form
document.getElementById('reservationForm').reset();
}
});
</script>
</body>
</html>
