Room Booking Form - Copy this Html, Bootstrap Component to your project

<div class="container py-5"> <div class="row justify-content-center"> <div class="col-md-8 col-lg-6"> <h2 class="text-center mb-4">Thông Tin Đặt Phòng</h2> <div id="roomForms"> <?php foreach ($rooms['room'] as $room): ?> <div class="card shadow-lg mb-4"> <div class="card-body p-4"> <h3 class="text-center mb-4">Thông Tin Phòng <?= htmlspecialchars($room['roomNo']) ?></h3> <!-- Adults form fields --> <?php for ($i = 1; $i <= $room['noOfAdults']; $i++): ?> <h4 class="mt-4">Hành Khách Người Lớn <?= $i ?></h4> <div class="mb-3"> <label class="form-label">Danh Xưng</label> <select class="form-select" name="salutation[]" required> <option value="">Chọn...</option> <option value="Ông">Ông</option> <option value="Bà">Bà</option> <option value="Cô">Cô</option> </select> <div class="invalid-feedback">Vui lòng chọn danh xưng.</div> </div> <div class="mb-3"> <label class="form-label">Tên</label> <input type="text" class="form-control" name="firstName[]" required> <div class="invalid-feedback">Vui lòng nhập tên.</div> </div> <div class="mb-3"> <label class="form-label">Họ</label> <input type="text" class="form-control" name="lastName[]" required> <div class="invalid-feedback">Vui lòng nhập họ.</div> </div> <div class="mb-3"> <label class="form-label">Tuổi</label> <input type="number" class="form-control" name="age[]" required> <div class="invalid-feedback">Vui lòng nhập tuổi.</div> </div> <?php endfor; ?> <!-- Children form fields --> <?php for ($i = 1; $i <= $room['noOfChildren']; $i++): ?> <h4 class="mt-4">Hành Khách Trẻ Em <?= $i ?></h4> <div class="mb-3"> <label class="form-label">Danh Xưng</label> <select class="form-select" name="salutation[]" required> <option value="">Chọn...</option> <option value="Ông">Ông</option> <option value="Bà">Bà</option> <option value="Cô">Cô</option> </select> <div class="invalid-feedback">Vui lòng chọn danh xưng.</div> </div> <div class="mb-3"> <label class="form-label">Tên</label> <input type="text" class="form-control" name="firstName[]" required> <div class="invalid-feedback">Vui lòng nhập tên.</div> </div> <div class="mb-3"> <label class="form-label">Họ</label> <input type="text" class="form-control" name="lastName[]" required> <div class="invalid-feedback">Vui lòng nhập họ.</div> </div> <div class="mb-3"> <label class="form-label">Tuổi</label> <input type="number" class="form-control" name="age[]" required> <div class="invalid-feedback">Vui lòng nhập tuổi.</div> </div> <?php endfor; ?> </div> </div> <?php endforeach; ?> </div> <div class="d-grid gap-2"> <button class="btn btn-primary btn-lg position-relative" type="submit" id="submitBtn"> <span class="btn-text">Gửi Tất Cả Thông Tin</span> <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span> </button> </div> </div> </div> </div> <script> document.getElementById('submitBtn').addEventListener('click', function (e) { e.preventDefault(); const forms = document.querySelectorAll('.card-body'); let isValid = true; forms.forEach(form => { const inputs = form.querySelectorAll('input, select'); inputs.forEach(input => { if (!input.checkValidity()) { input.classList.add('is-invalid'); isValid = false; } else { input.classList.remove('is-invalid'); input.classList.add('is-valid'); } }); }); if (isValid) { const spinner = this.querySelector('.spinner-border'); const btnText = this.querySelector('.btn-text'); spinner.classList.remove('d-none'); btnText.textContent = 'Đang gửi...'; this.disabled = true; setTimeout(() => { spinner.classList.add('d-none'); btnText.textContent = 'Gửi Tất Cả Thông Tin'; this.disabled = false; alert('Tất cả thông tin hành khách đã được gửi thành công!'); }, 2000); } }); </script>