In VSCode, I have 2 files, index.html and bookroom.html. In the index.html file there is a Jquery function that disables a form button when the checkout date is changed if it's value is not after the checkin date. This works perfectly fine when opened through the default browser (Chrome, Safari, Firefox) and will not let the user go to the bookroom page with the button unless the checkout date value is after the checkin date value. This I do not need help with, the next section is where I am having trouble.
index.html
<div class="check-availability-div">
<form action="./PreLogin/bookroom/bookroom.html?check" method="POST" class="form" id="form">
<!-- Destination Choice -->
<div class="destination-div">
<select class="destination-choice" id="destination" name="destination" required>
<option value="" disabled selected hidden>Choose Destination</option>
<option value="LasVegas">LasVegas</option>
<option value="Seattle">Seattle</option>
</select>
</div>
<!-- Check In Choice -->
<div class="check-in-date-div">
<label for="" class="input-label">Check In</label>
<input type="date" class="input" id="checkin-date" name="checkin-date" required>
</div>
<!-- Check Out Choice -->
<div class="check-out-date-div">
<label for="" class="input-label">Check Out</label>
<input type="date" class="input" id="checkout-date" name="checkout-date" required>
</div>
<!-- Check Button -->
<div class="check-button-div">
<button type="submit" form="form" class="check-availability-button" id="check-availability-button" onclick="checkAvailability()" >Check Availability</button>
</div>
</form>
</div>
index.html's Jquery (Placed after the last div, before the body ends)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
var today = new Date().toISOString().split('T')[0];
$("#checkin-date").attr('min', today);
$("#checkout-date").attr('min', today);
$("#checkin-date").change(function(){
var checkout = $("#checkout-date").val();
var checkoutCheck = new Date($("#checkout-date").val());
if (new Date($("#checkin-date").val()).getTime() >= new Date(checkoutCheck).getTime()) {
var checkin = $("#checkin-date").val();
$("#checkout-date").val(checkin);
alert("The Check In Date Must Be Before Your Check Out Date!");
}
});
$("#checkout-date").change(function(){
var checkin = $("#checkin-date").val();
var checkinCheck = new Date($("#checkin-date").val());
if (new Date($("#checkout-date").val()).getTime() <= new Date(checkinCheck).getTime()) {
$("#checkout-date").val(checkin);
$('#check-availability-button').attr('disabled', true);
alert("The Check Out Date Must Be After Your Check In Date!");
} else if (new Date($("#checkout-date").val()).getTime() > new Date(checkinCheck).getTime()) {
$('#check-availability-button').removeAttr('disabled');
}
});
});
</script>
My issue is in my jsp files I am validating if the user is logged in our not, and depending on this I am loading in a different header which holds this form and button. When using the same code in Eclipse and running Tomcat, the button is not having the attr/removeAttr part work like it is in VSCode. I am so confused because the alert boxes ARE working, and they are inside of the same if/else statements in the function. The files I am working with in Eclipse are index.jsp, header_pre.jsp, and bookroom.jsp. The code is exactly the same and I have tried placing the Jquery in the index.html and the header_pre.jsp file. Neither of these options are working and I am assuming I do not understand something happening here and am hoping someone can help me understand where my mistake is. Is this just some issue with a server? Do I need to use something else besides attr/removeAttr when using Eclipse and Tomcat? IS it because it is a jsp file? Again, this all works in VSCode perfectly when using just html, JS, and css files. Thank you!
index.jsp
<!-- CONTAINER DIV START -->
<div class="container">
<!-- HEADER (Pre-Login) START -->
<!-- MAIN HEADER START -->
<%
if (session.getAttribute("session") != "TRUE") {
%>
<%@include file="header_pre.jsp"%>
<%
} else {
%>
<%@include file="header_post.jsp"%>
<%}%>
index.jsp's Jquery (Placed after the last div, before the body ends. Was also placed in the header_pre.jsp as shown down below)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
var today = new Date().toISOString().split('T')[0];
$("#checkin-date").attr('min', today);
$("#checkout-date").attr('min', today);
$("#checkin-date").change(function(){
var checkout = $("#checkout-date").val();
var checkoutCheck = new Date($("#checkout-date").val());
if (new Date($("#checkin-date").val()).getTime() >= new Date(checkoutCheck).getTime()) {
var checkin = $("#checkin-date").val();
$("#checkout-date").val(checkin);
alert("The Check In Date Must Be Before Your Check Out Date!");
}
});
$("#checkout-date").change(function() {
var checkin = $("#checkin-date").val();
var checkinCheck = new Date($("#checkin-date").val());
if (new Date($("#checkout-date").val()).getTime() <= new Date(checkinCheck).getTime()) {
$("#checkout-date").val(checkin);
$('#check-availability-button').attr('disabled', true);
alert("The Check Out Date Must Be After Your Check In Date!");
} else if (new Date($("#checkout-date").val()).getTime() > new Date(checkinCheck).getTime()) {
$('#check-availability-button').removeAttr('disabled');
}
});
});
</script>
header_pre.jsp
<script>
JQUERY SCRIPT WAS PLACED HERE = DID NOT WORK
</script>
<div class="headerpre-login">
<!-- Logo Header-->
<div class="logo-div">
<img class="logo" src="/Provisio/images/Logos/LargeLogo.png"/>
</div>
<!-- Header Links -->
<div class="header-links">
<a class="home-link-header header-links-style" href="index.jsp">Home</a>
<a class="about-us-link-header header-links-style" href="./PreLogin/aboutpage.html">About Us</a>
<a class="locations-link-header header-links-style" href="./PreLogin/locationspage.html">Locations</a>
<a class="contact-us-link-header header-links-style" href="./PreLogin/contactpage.html">Contact Us</a>
<a class="rooms-link-header header-links-style" href="./PreLogin/roomspage.html">Rooms</a>
<!-- Login/Register Drop Down Header -->
<div class="login-register-div-header">
<ul class="menu">
<li class="login-register-list-header header-links-style">
<a href="#">Login/Register </a>
<ul class="submenu">
<li><a href="/Provisio/jsp/loginpages/login.jsp">Login</a></li>
<li><a href="/Provisio/jsp/registerpages/register.jsp">Register</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- MAIN HEADER END -->
<!-- SUB HEADER (CHECK AVAILABILITY) START -->
<div class="sub-header-div">
<div class="check-availability-div">
<form action="/Provisio/jsp/prelogin/bookroom/bookroom.jsp?check" method="POST" class="form" id="form">
<!-- Destination Choice -->
<div class="destination-div">
<select class="destination-choice" id="destination" name="destination" required>
<option value="" disabled selected hidden>Choose Destination</option>
<option value="LasVegas">LasVegas</option>
<option value="Seattle">Seattle</option>
</select>
</div>
<!-- Check In Choice -->
<div class="check-in-date-div">
<label for="" class="input-label">Check In</label>
<input type="date" class="input" id="checkin-date" name="checkin-date" min="2022-09-11" required>
</div>
<!-- Check Out Choice -->
<div class="check-out-date-div">
<label for="" class="input-label">Check Out</label>
<input type="date" class="input" id="checkout-date" name="checkout-date" min="2022-09-11" required>
</div>
<!-- Check Button -->
<div class="check-button-div">
<button type="submit" form="form" class="check-availability-button" onclick="checkAvailability()" >Check Availability</button>
</div>
</form>
</div>
</div>
<!-- SUB HEADER END -->
</div>
<!-- HEADER (Pre-Login) END -->
<script>
JQUERY SCRIPT WAS PLACED HERE = DID NOT WORK
</script>
UPDATE!!
I have continued trying to check dev tools. Through VScode the disabled attr is added when check out is set to the same date as checkin, however it is not being added when run through Eclipse/Tomcat. To fix this issue I did change my code to just validate the value a different way without disabling the button. Would love to understand why the original code wasn't working on Eclipse though. Here is my updated code doing the same thing but in a different way:
<script>
$(document).ready(function() {
var today = new Date().toISOString().split('T')[0];
$("#checkin-date").attr('min', today);
//$("#checkout-date").attr('min', today);
$("#checkin-date").change(function(){
var checkInDate = $(this).val();
var split = checkInDate.split('-');
var nextDay = new Date(split[0], split[1]-1, parseInt(split[2])+1, 0,0,0,0);
if (new Date(checkInDate).getTime() >= new Date($("#checkout-date").val()).getTime()){
$("#checkout-date")[0].valueAsDate = nextDay;
}
$("#checkout-date").attr('min', checkInDate);
});
$("#checkout-date").change(function(){
var checkOutDate = $(this).val();
var split = checkOutDate.split('-');
var dayBefore = new Date(split[0], split[1]-1, parseInt(split[2])-1, 0,0,0,0);
if (new Date($("#checkin-date").val()).getTime() >= new Date(checkOutDate).getTime()) {
$("#checkin-date")[0].valueAsDate = dayBefore;
}
});
});
</script>