File: C:/laragon/www/its/career.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Italian Tourist Services LTD | The Best Travel Agency</title>
<!-- [Assets] Icon -->
<link rel="icon" type="image/png" href="assets/images/favicon.png">
<!-- [Assets] Vendors -->
<link rel="stylesheet" href="assets/vendors/bootstrap/css/bootstrap.min.css" media="all">
<link rel="stylesheet" type="text/css" href="assets/vendors/fontawesome/css/all.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendors/jquery-ui/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendors/modal-video/modal-video.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendors/lightbox/dist/css/lightbox.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendors/slick/slick.css">
<link rel="stylesheet" type="text/css" href="assets/vendors/slick/slick-theme.css">
<!-- [Fonts] -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap" rel="stylesheet">
<!-- [CSS] -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="siteLoader" class="site-loader">
<div class="preloader-content">
<img src="assets/images/loader1.gif" alt="">
</div>
</div>
<div id="page" class="full-page">
<header id="masthead" class="site-header header-primary">
<div class="contactTop-js"></div>
<div class="nav-js"></div>
</header>
<main id="content" class="site-main">
<section class="inner-banner-wrap">
<div class="inner-baner-container" style="background-image: url(assets/images/background-index.jpg);">
<div class="container">
<div class="inner-banner-content">
<h1 class="inner-title">Career</h1>
</div>
</div>
</div>
<div class="inner-shape"></div>
</section>
<div class="carrer-page-section">
<div class="container">
<div class="vacancy-section">
<div class="section-heading text-center">
<div class="row">
<div class="col-lg-8 offset-lg-2">
<h5 class="dash-style">VACANCY / CAREERS</h5>
<h2>LET'S JOIN WITH US!</h2>
<p>We invite you to formally apply for a position with our esteemed organization. To initiate the application process, kindly click on the "APPLY NOW" button corresponding to the specific job role of your interest. This will direct you to the designated application form, where you can provide the requisite information to be considered for the position. We appreciate your interest in joining our team and look forward to reviewing your application.</p>
</div>
</div>
</div>
<div class="vacancy-container">
<div class="row">
<div class="col-lg-7">
<div class="vacancy-content-wrap">
<div class="row">
<div class="col-md-6">
<div class="vacancy-content">
<h5>Full Time / Part Time</h5>
<h3>Business intermediary</h3>
<a onclick="jobBI()" class="button-primary">APPLY NOW</a>
</div>
</div>
<div class="col-md-6">
<div class="vacancy-content">
<h5>Full Time / Part Time</h5>
<h3>Foreign travel agency</h3>
<a onclick="jobFTA()" class="button-primary">APPLY NOW</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5">
<div class="vacancy-form">
<h3>JOIN OUR TEAM</h3>
<form>
<p>
<input id="firstName" type="text" name="name" placeholder="Your First Name">
</p>
<p>
<input id="lastName" type="text" name="name" placeholder="Your Last Name">
</p>
<p>
<input id="typeJob" type="text" name="name" placeholder="Business intermediary / Foreign travel agency" disabled>
</p>
<p>
<input id="email" type="email" name="name" placeholder="Your Email">
</p>
<p>
<input id="phone" type="text" name="name" placeholder="Your Phone">
</p>
<p>
<textarea id="message" rows="7" placeholder="More information"></textarea>
</p>
<p>
<input type="submit" name="submit" value="SEND APPLICATION" onclick="sendApplication()">
</p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<div class="footer-js"></div>
<a id="backTotop" href="#" class="to-top-icon">
<i class="fas fa-chevron-up"></i>
</a>
<div class="header-search-form">
<div class="container">
<div class="header-search-container">
<form class="search-form" role="search" method="get" >
<input type="text" name="s" placeholder="Enter your text...">
</form>
<a href="#" class="search-close">
<i class="fas fa-times"></i>
</a>
</div>
</div>
</div>
</div>
<!-- JavaScript -->
<script src="assets/js/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="assets/vendors/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/vendors/jquery-ui/jquery-ui.min.js"></script>
<script src="assets/vendors/countdown-date-loop-counter/loopcounter.js"></script>
<script src="assets/js/jquery.counterup.js"></script>
<script src="assets/vendors/modal-video/jquery-modal-video.min.js"></script>
<script src="assets/vendors/masonry/masonry.pkgd.min.js"></script>
<script src="assets/vendors/lightbox/dist/js/lightbox.min.js"></script>
<script src="assets/vendors/slick/slick.min.js"></script>
<script src="assets/js/jquery.slicknav.js"></script>
<script src="assets/js/custom.min.js"></script>
<script type="module">
import { showFooter } from "./assets/js/footer.js";
import { showNav } from "./assets/js/nav.js";
import { showCTop } from "./assets/js/contactTop.js"
showFooter();
showNav();
showCTop();
</script>
<script>
window.onload = function() {
cleanInput();
}
function cleanInput() {
try {
document.querySelector('#typeJob').value = "";
} catch(err) {
console.log(err);
}
}
function jobBI() {
try {
document.querySelector('#typeJob').value = "Business intermediary";
} catch(err) {
console.log(err);
}
}
function jobFTA() {
try {
document.querySelector('#typeJob').value = "Foreign travel agency";
} catch(err) {
console.log(err);
}
}
</script>
<script>
function sendApplication() {
var firstName = $.trim($("#firstName").val());
var lastName = $.trim($("#lastName").val());
var typeJob = $.trim($("#typeJob").val());
var email = $.trim($("#email").val());
var phone = $.trim($("#phone").val());
var resume = $.trim($("#resume").val());
var message = $.trim($("#message").val());
if (firstName != "" && lastName != "" && typeJob != "" && email != "" && phone != "" && message != "") {
const xhr = new XMLHttpRequest();
xhr.open("POST", "sendApplication.php");
xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
const body = JSON.stringify({firstName: firstName, lastName: lastName, typeJob: typeJob, email: email, phone: phone, message: message});
xhr.onload = () => {
if (xhr.readyState == 4 && xhr.status == 201) {
console.log(JSON.parse(xhr.responseText));
} else {
console.log(`Error: ${xhr.status}`);
}
};
xhr.send(body);
} else {
alert("Please, fill all the fields.");
}
}
</script>
</body>
</html>