651 lines
36 KiB
PHP
651 lines
36 KiB
PHP
|
<!DOCTYPE html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
|
||
|
|
<title>Request a Demo Form</title>
|
||
|
|
|
||
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
|
||
|
|
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
|
||
|
|
|
||
|
|
<style>
|
||
|
|
input[type="number"] {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.d-none {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<?php
|
||
|
|
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||
|
|
if (!empty($_POST["send"])) {
|
||
|
|
$fname = !empty($_POST["first_name"]) ? htmlspecialchars($_POST["first_name"]) : "N/A";
|
||
|
|
$lname = !empty($_POST["last_name"]) ? htmlspecialchars($_POST["last_name"]) : "N/A";
|
||
|
|
$gender = !empty($_POST["gender"]) ? htmlspecialchars($_POST["gender"]) : "N/A";
|
||
|
|
$email = !empty($_POST["email"]) && filter_var($_POST["email"], FILTER_VALIDATE_EMAIL) ? htmlspecialchars($_POST["email"]) : "N/A";
|
||
|
|
$phone = !empty($_POST["phone"]) ? htmlspecialchars($_POST["phone"]) : "N/A";
|
||
|
|
$departure = !empty($_POST["departure_airport"]) ? htmlspecialchars($_POST["departure_airport"]) : "N/A";
|
||
|
|
$destination = !empty($_POST["destination_airport"]) ? htmlspecialchars($_POST["destination_airport"]) : "N/A";
|
||
|
|
$additional_req = !empty($_POST["additional_req"]) ? htmlspecialchars($_POST["additional_req"]) : "N/A";
|
||
|
|
$travel_type = !empty($_POST["travel_type"]) ? htmlspecialchars($_POST["travel_type"]) : "N/A";
|
||
|
|
|
||
|
|
if ($travel_type == 'One way') {
|
||
|
|
$s_departure_date = !empty($_POST["s_departure_date"]) ? htmlspecialchars($_POST["s_departure_date"]) : "N/A";
|
||
|
|
$s_flexibility_on_dep = !empty($_POST["s_flexibility_on_dep"]) ? htmlspecialchars($_POST["s_flexibility_on_dep"]) : "N/A";
|
||
|
|
} elseif ($travel_type == 'Round trip') {
|
||
|
|
$t_departure_date = !empty($_POST["t_departure_date"]) ? htmlspecialchars($_POST["t_departure_date"]) : "N/A";
|
||
|
|
$t_flexibility_on_dep = !empty($_POST["t_flexibility_on_dep"]) ? htmlspecialchars($_POST["t_flexibility_on_dep"]) : "N/A";
|
||
|
|
$t_return_date = !empty($_POST["t_return_date"]) ? htmlspecialchars($_POST["t_return_date"]) : "N/A";
|
||
|
|
$t_flexibility_on_return = !empty($_POST["t_flexibility_on_return"]) ? htmlspecialchars($_POST["t_flexibility_on_return"]) : "N/A";
|
||
|
|
} elseif ($travel_type == 'Multi city') {
|
||
|
|
$from = !empty($_POST["from"]) ? array_map('htmlspecialchars', $_POST["from"]) : [];
|
||
|
|
$to = !empty($_POST["to"]) ? array_map('htmlspecialchars', $_POST["to"]) : [];
|
||
|
|
$date = !empty($_POST["date"]) ? array_map('htmlspecialchars', $_POST["date"]) : [];
|
||
|
|
$flexibility = !empty($_POST["flexibility"]) ? array_map('htmlspecialchars', $_POST["flexibility"]) : [];
|
||
|
|
}
|
||
|
|
|
||
|
|
$adult = !empty($_POST["adult"]) ? htmlspecialchars($_POST["adult"]) : "N/A";
|
||
|
|
$children = !empty($_POST["children"]) ? htmlspecialchars($_POST["children"]) : "N/A";
|
||
|
|
$infant = !empty($_POST["infant"]) ? htmlspecialchars($_POST["infant"]) : "N/A";
|
||
|
|
|
||
|
|
$adult_gender = !empty($_POST["adult_gender"]) ? array_map('htmlspecialchars', $_POST["adult_gender"]) : [];
|
||
|
|
$adult_first_name = !empty($_POST["adult_first_name"]) ? array_map('htmlspecialchars', $_POST["adult_first_name"]) : [];
|
||
|
|
$adult_last_name = !empty($_POST["adult_last_name"]) ? array_map('htmlspecialchars', $_POST["adult_last_name"]) : [];
|
||
|
|
|
||
|
|
$children_gender = !empty($_POST["children_gender"]) ? array_map('htmlspecialchars', $_POST["children_gender"]) : [];
|
||
|
|
$children_first_name = !empty($_POST["children_first_name"]) ? array_map('htmlspecialchars', $_POST["children_first_name"]) : [];
|
||
|
|
$children_last_name = !empty($_POST["children_last_name"]) ? array_map('htmlspecialchars', $_POST["children_last_name"]) : [];
|
||
|
|
$children_dob = !empty($_POST["children_dob"]) ? array_map('htmlspecialchars', $_POST["children_dob"]) : [];
|
||
|
|
|
||
|
|
$infant_gender = !empty($_POST["infant_gender"]) ? array_map('htmlspecialchars', $_POST["infant_gender"]) : [];
|
||
|
|
$infant_first_name = !empty($_POST["infant_first_name"]) ? array_map('htmlspecialchars', $_POST["infant_first_name"]) : [];
|
||
|
|
$infant_last_name = !empty($_POST["infant_last_name"]) ? array_map('htmlspecialchars', $_POST["infant_last_name"]) : [];
|
||
|
|
$infant_dob = !empty($_POST["infant_dob"]) ? array_map('htmlspecialchars', $_POST["infant_dob"]) : [];
|
||
|
|
|
||
|
|
$toEmail = "deepakshresthadharan123@gmail.com";
|
||
|
|
$subject = "New Request for Quote";
|
||
|
|
|
||
|
|
$mailHeaders = "MIME-Version: 1.0" . "\r\n";
|
||
|
|
$mailHeaders .= "Content-type:text/html;charset=UTF-8" . "\r\n";
|
||
|
|
$mailHeaders .= "From: $fname $lname <$email>" . "\r\n";
|
||
|
|
|
||
|
|
$emailBody = "
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang='en'>
|
||
|
|
<head>
|
||
|
|
<meta charset='UTF-8'>
|
||
|
|
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
||
|
|
<title>New Request for Quote</title>
|
||
|
|
<style>
|
||
|
|
body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f9; }
|
||
|
|
.container { max-width: 600px; margin: 20px auto; background-color: #ffffff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 8px; overflow: hidden; }
|
||
|
|
.header { background-color: #007bff; color: white; text-align: center; padding: 20px; }
|
||
|
|
.header h2 { margin: 0; font-size: 24px; }
|
||
|
|
.body { padding: 20px; color: #333333; }
|
||
|
|
.body h3 { margin-top: 0; font-size: 18px; }
|
||
|
|
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
|
||
|
|
table, th, td { border: 1px solid #dddddd; }
|
||
|
|
th, td { padding: 15px; text-align: left; font-size: 14px; }
|
||
|
|
th { background-color: #f2f2f2; }
|
||
|
|
.footer { background-color: #007bff; color: white; text-align: center; padding: 15px; border-top: 1px solid #dddddd; }
|
||
|
|
.footer p { margin: 0; font-size: 14px; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class='container'>
|
||
|
|
|
||
|
|
<div class='header'>
|
||
|
|
<h2>New Request for Quote</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class='body'>
|
||
|
|
<h3>Contact Details</h3>
|
||
|
|
<table>
|
||
|
|
<tr><th>Name</th><td>$gender $fname $lname</td></tr>
|
||
|
|
<tr><th>Email</th><td>$email</td></tr>
|
||
|
|
<tr><th>Phone</th><td>$phone</td></tr>
|
||
|
|
<tr><th>Travel Type</th><td>$travel_type</td></tr>";
|
||
|
|
|
||
|
|
if ($travel_type == 'One way') {
|
||
|
|
$emailBody .= "<tr><th>Departure Date</th><td>$s_departure_date</td></tr>
|
||
|
|
<tr><th>Flexibility on Departure</th><td>$s_flexibility_on_dep</td></tr>";
|
||
|
|
} elseif ($travel_type == 'Round trip') {
|
||
|
|
$emailBody .= "<tr><th>Departure Date</th><td>$t_departure_date</td></tr>
|
||
|
|
<tr><th>Flexibility on Departure</th><td>$t_flexibility_on_dep</td></tr>
|
||
|
|
<tr><th>Return Date</th><td>$t_return_date</td></tr>
|
||
|
|
<tr><th>Flexibility on Return</th><td>$t_flexibility_on_return</td></tr>";
|
||
|
|
} elseif ($travel_type == 'Multi city') {
|
||
|
|
foreach ($from as $key => $item) {
|
||
|
|
$emailBody .= "<tr><th>From</th><td>$from[$key]</td></tr>
|
||
|
|
<tr><th>To</th><td>$to[$key]</td></tr>
|
||
|
|
<tr><th>Date</th><td>$date[$key]</td></tr>
|
||
|
|
<tr><th>Flexibility</th><td>$flexibility[$key]</td></tr>";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
$emailBody .= "<tr><th>No. of Adults</th><td>$adult</td></tr>
|
||
|
|
<tr><th>No. of Children</th><td>$children</td></tr>
|
||
|
|
<tr><th>No. of Infants</th><td>$infant</td></tr>
|
||
|
|
<tr><th>Additional Requirements</th><td>$additional_req</td></tr>";
|
||
|
|
|
||
|
|
if ($adult > 0) {
|
||
|
|
foreach ($adult_gender as $key => $adult) {
|
||
|
|
$emailBody .= "<tr><th>Adult Name</th><td>$adult_gender[$key] $adult_first_name[$key] $adult_last_name[$key]</td></tr>";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if ($children > 0) {
|
||
|
|
foreach ($children_gender as $key => $child) {
|
||
|
|
$emailBody .= "<tr><th>Child DOB</th><td>$children_dob[$key]</td></tr>
|
||
|
|
<tr><th>Child Name</th><td>$children_gender[$key] $children_first_name[$key] $children_last_name[$key]</td></tr>";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if ($infant > 0) {
|
||
|
|
foreach ($infant_gender as $key => $infant) {
|
||
|
|
$emailBody .= "<tr><th>Infant DOB</th><td>$infant_dob[$key]</td></tr>
|
||
|
|
<tr><th>Infant Name</th><td>$infant_gender[$key] $infant_first_name[$key] $infant_last_name[$key]</td></tr>";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
$emailBody .= "
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class='footer'>
|
||
|
|
<p>© Flight Ticket Nepal.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
";
|
||
|
|
|
||
|
|
if (mail($toEmail, $subject, $emailBody, $mailHeaders)) {
|
||
|
|
$message = "Your contact information has been received successfully.";
|
||
|
|
} else {
|
||
|
|
$message = "Failed to send email. Please try again later.";
|
||
|
|
error_log("Mail failed to send.");
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
?>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
|
||
|
|
<div class="col-lg-12">
|
||
|
|
<h2 class="text-center p-5">Request a Quote Form</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-lg-12">
|
||
|
|
<form id="quote-form" method="POST" class="needs-validation" novalidate>
|
||
|
|
|
||
|
|
<div class="card bg-light">
|
||
|
|
|
||
|
|
<div class="card-body p-5 rounded-3">
|
||
|
|
|
||
|
|
<?php if (!empty($message)) { ?>
|
||
|
|
<div style="color:green; padding-bottom: 30px;">
|
||
|
|
<strong><?php echo $message; ?></strong>
|
||
|
|
</div>
|
||
|
|
<?php } ?>
|
||
|
|
|
||
|
|
<div class="row gy-2">
|
||
|
|
<div class="col-lg-4">
|
||
|
|
<input class="form-control form-control-lg" type="text" name="departure_airport"
|
||
|
|
placeholder="Departure Airport" required>
|
||
|
|
<div class="invalid-feedback">Please enter departure airport</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-4">
|
||
|
|
<input class="form-control form-control-lg" type="text"
|
||
|
|
name="destination_airport" placeholder="Destination Airport" required>
|
||
|
|
<div class="invalid-feedback">Please enter destination airport</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-lg-4">
|
||
|
|
<select id="travel-type" name="travel_type" class="form-select form-select-lg"
|
||
|
|
required>
|
||
|
|
<option value="" selected>Select Travel Type</option>
|
||
|
|
<option value="One way">One Way</option>
|
||
|
|
<option value="Round trip">Round Trip</option>
|
||
|
|
<option value="Multi city">Multicity</option>
|
||
|
|
</select>
|
||
|
|
<div class="invalid-feedback">Please select your travel type</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- for one way travel type -->
|
||
|
|
<div class="row gy-2 mt-4 justify-content-center one-way d-none">
|
||
|
|
<div class="col-lg-3">
|
||
|
|
<label for="departure_date" class="form-label fs-5">Departure Date</label>
|
||
|
|
<input class="form-control form-control-lg" type="date" name="s_departure_date"
|
||
|
|
placeholder="Departure Date">
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-3">
|
||
|
|
<label for="flexibility_on_dep" class="form-label fs-5">Flexibility on
|
||
|
|
Departure</label>
|
||
|
|
<select name="s_flexibility_on_dep" class="form-select form-select-lg">
|
||
|
|
<option value="" selected>None</option>
|
||
|
|
<option value="Not Flexible">Not Flexible</option>
|
||
|
|
<option value="+/- 1 Day">+/- 1 Day</option>
|
||
|
|
<option value="+/- 3 Days">+/- 3 Days</option>
|
||
|
|
<option value="+/- 1 Week">+/- 1 Week</option>
|
||
|
|
<option value="+/- 2 Weeks">+/- 2 Weeks</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- for two way travel type -->
|
||
|
|
<div class="row gy-2 mt-4 round-trip d-none">
|
||
|
|
<div class="col-lg-3">
|
||
|
|
<label for="departure_date" class="form-label fs-5">Departure Date</label>
|
||
|
|
<input class="form-control form-control-lg" type="date" name="t_departure_date">
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-3">
|
||
|
|
<label for="flexibility_on_dep" class="form-label fs-5">Flexibility on
|
||
|
|
Departure</label>
|
||
|
|
<select name="t_flexibility_on_dep" class="form-select form-select-lg">
|
||
|
|
<option value="" selected>None</option>
|
||
|
|
<option value="Not Flexible">Not Flexible</option>
|
||
|
|
<option value="+/- 1 Day">+/- 1 Day</option>
|
||
|
|
<option value="+/- 3 Days">+/- 3 Days</option>
|
||
|
|
<option value="+/- 1 Week">+/- 1 Week</option>
|
||
|
|
<option value="+/- 2 Weeks">+/- 2 Weeks</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-lg-3">
|
||
|
|
<label for="return_date" class="form-label fs-5">Returning Date</label>
|
||
|
|
<input class="form-control form-control-lg" type="date" name="t_return_date">
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-3">
|
||
|
|
<label for="flexibility_on_return" class="form-label fs-5">Flexibility on
|
||
|
|
Return</label>
|
||
|
|
<select name="t_flexibility_on_return" class="form-select form-select-lg">
|
||
|
|
<option value="" selected>None</option>
|
||
|
|
<option value="Not Flexible">Not Flexible</option>
|
||
|
|
<option value="+/- 1 Day">+/- 1 Day</option>
|
||
|
|
<option value="+/- 3 Days">+/- 3 Days</option>
|
||
|
|
<option value="+/- 1 Week">+/- 1 Week</option>
|
||
|
|
<option value="+/- 2 Weeks">+/- 2 Weeks</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- for mulit-city -->
|
||
|
|
<div class="multi-city mt-4 mb-1 d-none">
|
||
|
|
<div class="row gy-2 mb-2">
|
||
|
|
<div class="col-lg-3">
|
||
|
|
<label for="from" class="form-label fs-5">From</label>
|
||
|
|
<input class="form-control form-control-lg" type="text" name="from[]"
|
||
|
|
placeholder="From">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-lg-3">
|
||
|
|
<label for="to" class="form-label fs-5">To</label>
|
||
|
|
<input class="form-control form-control-lg" type="text" name="to[]"
|
||
|
|
placeholder="To">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-lg-3">
|
||
|
|
<label for="date" class="form-label fs-5">Date</label>
|
||
|
|
<input class="form-control form-control-lg" type="date" name="date[]">
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-3">
|
||
|
|
<label for="flexibility" class="form-label fs-5">Flexibility</label>
|
||
|
|
<select name="flexibility[]" class="form-select form-select-lg">
|
||
|
|
<option value="" selected>None</option>
|
||
|
|
<option value="Not Flexible">Not Flexible</option>
|
||
|
|
<option value="+/- 1 Day">+/- 1 Day</option>
|
||
|
|
<option value="+/- 3 Days">+/- 3 Days</option>
|
||
|
|
<option value="+/- 1 Week">+/- 1 Week</option>
|
||
|
|
<option value="+/- 2 Weeks">+/- 2 Weeks</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="text-center mt-4">
|
||
|
|
<a href="javascript::void(0)"
|
||
|
|
class="btn btn-success btn-hover-success add-multi-city"> + Add
|
||
|
|
More</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Personal Information -->
|
||
|
|
<div class="row gy-4 mt-4">
|
||
|
|
|
||
|
|
<div class="col-lg-12 mb-4">
|
||
|
|
<h6 class="text-center text-muted">Name and Contact Details: Please fill in your
|
||
|
|
personal information for this form.</h5>
|
||
|
|
<div class="border border-dashed"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-lg-4">
|
||
|
|
<input class="form-control form-control-lg" type="text" name="first_name"
|
||
|
|
placeholder="First Name" required>
|
||
|
|
<div class="invalid-feedback">Please enter your first name</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-lg-4">
|
||
|
|
<input class="form-control form-control-lg" type="text" name="last_name"
|
||
|
|
placeholder="Last Name" required>
|
||
|
|
<div class="invalid-feedback">Please enter your last name</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-lg-4">
|
||
|
|
<select name="gender" class="form-select form-select-lg" required>
|
||
|
|
<option value="" selected>Select Gender</option>
|
||
|
|
<option value="Mr">Mr.</option>
|
||
|
|
<option value="Mrs">Mrs.</option>
|
||
|
|
<option value="Miss">Miss</option>
|
||
|
|
</select>
|
||
|
|
<div class="invalid-feedback">Please select your gender</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-lg-4">
|
||
|
|
<input class="form-control form-control-lg" type="email" name="email"
|
||
|
|
placeholder="Email Address" required>
|
||
|
|
<div class="invalid-feedback">Please enter a valid email address</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-lg-4">
|
||
|
|
<input class="form-control form-control-lg" type="text" name="phone"
|
||
|
|
placeholder="Contact Number" required>
|
||
|
|
<div class="invalid-feedback">Please enter valid phone number</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-lg-4">
|
||
|
|
<input class="form-control form-control-lg" type="text" name="alternate_phone"
|
||
|
|
placeholder="Alternate Contact Number">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- Passenger Details -->
|
||
|
|
<div class="row gx-5 gy-2 my-5 justify-content-center">
|
||
|
|
|
||
|
|
<div class="col-lg-12 mb-4">
|
||
|
|
<h6 class="text-center text-muted">When traveling, it's essential that the names
|
||
|
|
of all passengers match exactly what is stated on the passports they will be
|
||
|
|
using.</h6>
|
||
|
|
<div class="border border-dashed"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-lg-3">
|
||
|
|
<label for="adult-input" class="form-label fs-5">Number of Adults <span
|
||
|
|
class="text-danger">*</span></label>
|
||
|
|
|
||
|
|
<input id="adult-input" class="form-control form-control-lg" type="number"
|
||
|
|
name="adult" placeholder="0" min="0" max="10" required>
|
||
|
|
<p class="text-center text-muted mt-2">(Including you)</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-lg-3">
|
||
|
|
<label for="children-input" class="form-label fs-5">Number of Children <span
|
||
|
|
class="text-danger">*</span></label>
|
||
|
|
|
||
|
|
<input id="children-input" class="form-control form-control-lg" type="number"
|
||
|
|
name="children" placeholder="0" min="0" max="5">
|
||
|
|
<p class="text-center text-muted mt-2">(Age 2-11)</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-lg-3">
|
||
|
|
<label for="infant-input" class="form-label fs-5">Number of Infants <span
|
||
|
|
class="text-danger">*</span></label>
|
||
|
|
|
||
|
|
<input id="infant-input" class="form-control form-control-lg" type="number"
|
||
|
|
name="infant" placeholder="0" min="0" max="5">
|
||
|
|
<p class="text-center text-muted mt-2">(0-23 Months)</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Adult Table -->
|
||
|
|
<div class="row adult-information">
|
||
|
|
<table id="adult-table" class="table table-striped table-light">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th colspan="3" class="text-center p-2 bg-secondary text-white">Adult
|
||
|
|
Information</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Children Table -->
|
||
|
|
<div class="row mt-3 children-information">
|
||
|
|
<table id="children-table" class="table table-striped table-light">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th colspan="4" class="text-center p-2 bg-secondary text-white">Children
|
||
|
|
Information</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Infant Table -->
|
||
|
|
<div class="row mt-3 infant-information">
|
||
|
|
<table id="infant-table" class="table table-striped table-light">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th colspan="4" class="text-center p-2 bg-secondary text-white">Infant
|
||
|
|
Information</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row mt-4">
|
||
|
|
<div class="col-lg-12">
|
||
|
|
<div class="form-floating">
|
||
|
|
<textarea class="form-control w-100"
|
||
|
|
placeholder="Leave any additional requests" id="textarea"
|
||
|
|
style="height: 150px" name="additional_req"></textarea>
|
||
|
|
<label for="textarea">Any additional requests</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<input name="send" value="send" type="hidden" />
|
||
|
|
|
||
|
|
<div class="text-center m-5">
|
||
|
|
<button type="submit" class="btn btn-primary rounded-2 btn-md">Request a Quote</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
|
||
|
|
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
|
||
|
|
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
|
||
|
|
integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous">
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
(() => {
|
||
|
|
'use strict';
|
||
|
|
const forms = document.querySelectorAll('.needs-validation');
|
||
|
|
Array.from(forms).forEach(form => {
|
||
|
|
form.addEventListener('submit', event => {
|
||
|
|
if (!form.checkValidity()) {
|
||
|
|
event.preventDefault();
|
||
|
|
event.stopPropagation();
|
||
|
|
}
|
||
|
|
|
||
|
|
form.classList.add('was-validated');
|
||
|
|
}, false);
|
||
|
|
});
|
||
|
|
})();
|
||
|
|
|
||
|
|
$(document).ready(function () {
|
||
|
|
$('#quote-form')[0].reset();
|
||
|
|
$('#adult-input').val(1);
|
||
|
|
$('#adult-input').trigger('input');
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#travel-type').change(function () {
|
||
|
|
let type = $(this).val();
|
||
|
|
if (type) {
|
||
|
|
if (type === 'One way') {
|
||
|
|
$('.one-way').removeClass('d-none');
|
||
|
|
$('.round-trip').addClass('d-none');
|
||
|
|
$('.multi-city').addClass('d-none');
|
||
|
|
} else if (type === 'Round trip') {
|
||
|
|
$('.round-trip').removeClass('d-none');
|
||
|
|
$('.one-way').addClass('d-none');
|
||
|
|
$('.multi-city').addClass('d-none');
|
||
|
|
} else {
|
||
|
|
$('.multi-city').removeClass('d-none');
|
||
|
|
$('.one-way').addClass('d-none');
|
||
|
|
$('.round-trip').addClass('d-none');
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
$('.one-way').addClass('d-none');
|
||
|
|
$('.round-trip').addClass('d-none');
|
||
|
|
$('.multi-city').addClass('d-none');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".add-multi-city").click(function () {
|
||
|
|
let clonedRow = $(".multi-city .row:last").clone();
|
||
|
|
$(".multi-city .row:last").before(clonedRow);
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#adult-input').on('input', function () {
|
||
|
|
$('.adult-information').removeClass('d-none');
|
||
|
|
let numAdults = parseInt($(this).val());
|
||
|
|
if (!isNaN(numAdults) && numAdults > 0) {
|
||
|
|
let $tbody = $('#adult-table tbody');
|
||
|
|
$tbody.empty();
|
||
|
|
for (let i = 0; i < numAdults; i++) {
|
||
|
|
let row = `
|
||
|
|
<tr>
|
||
|
|
<td colspan="1">
|
||
|
|
<select name="adult_gender[]" class="form-select form-select-lg" required>
|
||
|
|
<option value="" selected>Select Gender</option>
|
||
|
|
<option value="Mr">Mr.</option>
|
||
|
|
<option value="Mrs">Mrs.</option>
|
||
|
|
<option value="Miss">Miss</option>
|
||
|
|
</select>
|
||
|
|
</td>
|
||
|
|
<td colspan="1">
|
||
|
|
<input class="form-control form-control-lg" type="text" name="adult_first_name[]" placeholder="First Name" required>
|
||
|
|
</td>
|
||
|
|
<td colspan="1">
|
||
|
|
<input class="form-control form-control-lg" type="text" name="adult_last_name[]" placeholder="Last Name" required>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
`;
|
||
|
|
$tbody.append(row);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
$('.adult-information').addClass('d-none');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#children-input').on('input', function () {
|
||
|
|
$('.children-information').removeClass('d-none');
|
||
|
|
let numChildren = parseInt($(this).val());
|
||
|
|
if (!isNaN(numChildren) && numChildren > 0) {
|
||
|
|
let $tbody = $('#children-table tbody');
|
||
|
|
$tbody.empty();
|
||
|
|
for (let i = 0; i < numChildren; i++) {
|
||
|
|
let row = `
|
||
|
|
<tr>
|
||
|
|
<td colspan="1">
|
||
|
|
<select name="children_gender[]" class="form-select form-select-lg" required>
|
||
|
|
<option value="" selected>Select Gender</option>
|
||
|
|
<option value="Mr">Mr.</option>
|
||
|
|
<option value="Mrs">Mrs.</option>
|
||
|
|
<option value="Miss">Miss</option>
|
||
|
|
</select>
|
||
|
|
</td>
|
||
|
|
<td colspan="1">
|
||
|
|
<input class="form-control form-control-lg" type="text" name="children_first_name[]" placeholder="First Name" required>
|
||
|
|
</td>
|
||
|
|
<td colspan="1">
|
||
|
|
<input class="form-control form-control-lg" type="text" name="children_last_name[]" placeholder="Last Name" required>
|
||
|
|
</td>
|
||
|
|
<td colspan="1">
|
||
|
|
<input class="form-control form-control-lg" type="date" name="children_dob[]" required>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
`;
|
||
|
|
$tbody.append(row);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
$('.children-information').addClass('d-none');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#infant-input').on('input', function () {
|
||
|
|
$('.infant-information').removeClass('d-none');
|
||
|
|
let numInfants = parseInt($(this).val());
|
||
|
|
if (!isNaN(numInfants) && numInfants > 0) {
|
||
|
|
let $tbody = $('#infant-table tbody');
|
||
|
|
$tbody.empty();
|
||
|
|
for (let i = 0; i < numInfants; i++) {
|
||
|
|
let row = `
|
||
|
|
<tr>
|
||
|
|
<td colspan="1">
|
||
|
|
<select name="infant_gender[]" class="form-select form-select-lg" required>
|
||
|
|
<option value="" selected>Select Gender</option>
|
||
|
|
<option value="Mr">Mr.</option>
|
||
|
|
<option value="Mrs">Mrs.</option>
|
||
|
|
<option value="Miss">Miss</option>
|
||
|
|
</select>
|
||
|
|
</td>
|
||
|
|
<td colspan="1">
|
||
|
|
<input class="form-control form-control-lg" type="text" name="infant_first_name[]" placeholder="First Name" required>
|
||
|
|
</td>
|
||
|
|
<td colspan="1">
|
||
|
|
<input class="form-control form-control-lg" type="text" name="infant_last_name[]" placeholder="Last Name" required>
|
||
|
|
</td>
|
||
|
|
<td colspan="1">
|
||
|
|
<input class="form-control form-control-lg" type="date" name="infant_dob[]" required>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
`;
|
||
|
|
$tbody.append(row);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
$('.infant-information').addClass('d-none');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|