I want to calculate days of a reservation for a booking website. I want to calculate total price (days*$100) automatically without click any button to run function but update auto with out refresh page.
function daysBetween(startDate, endDate) {
var millisecondsPerDay = 1000 * 60 * 60 * 24;
var startDateUTC = Date.UTC(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
var endDateUTC = Date.UTC(endDate.getFullYear(), endDate.getMonth(), endDate.getDate());
return Math.floor((endDateUTC - startDateUTC) / millisecondsPerDay);
}
document.getElementById("btn").addEventListener("click", function() {
let startDate = new Date(document.getElementById("startdate").value);
let endDate = new Date(document.getElementById("enddate").value);
let output = document.getElementById("totalprice");
// Get how much days is between these dates
let days = daysBetween(startDate, endDate);
if (days) {
output.classList.remove("text-danger");
output.innerHTML = `${days*100}€`;
} else {
/* if no valid date is entered */
output.classList.add("text-danger");
output.innerHTML = `Select valid dates`;
}
}, false);<section class="sec5">Check in</section>
<section class="sec2"><input class="date" id="startdate" type="date" name="checkin" required=""></section>
<section class="sec5">Check out</section>
<section class="sec2"><input class="date" id="enddate" type="date" name="checkout" required=""></section>
<p>Total price</p>
<section class="sec3" id="totalprice" name="totalprice">--</section>
<div id="btn">CALCULATE</div>Possible solution use change event to the last input (checkout input` so the function will be triggered when an element's value is committed by the user.
The change event is fired for
<input><select>, and<textarea>elements when an alteration to the element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.
Also, I add an if statement to make the function only executed when both input have value.
function daysBetween(startDate, endDate) {
var millisecondsPerDay = 1000 * 60 * 60 * 24;
var startDateUTC = Date.UTC(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
var endDateUTC = Date.UTC(endDate.getFullYear(), endDate.getMonth(), endDate.getDate());
return Math.floor((endDateUTC - startDateUTC) / millisecondsPerDay);
}
document.getElementById("enddate").addEventListener("change",function(){
//Check if the value is existed
if(document.getElementById("startdate").value)
check()
});
document.getElementById("startdate").addEventListener("change",function(){
//Check if the value is existed
if(document.getElementById("enddate").value)
check()
});
function check() {
let startDate = new Date(document.getElementById("startdate").value);
let endDate = new Date(document.getElementById("enddate").value);
let output = document.getElementById("totalprice");
// Get how much days is between these dates
let days = daysBetween(startDate, endDate);
if (days) {
output.classList.remove("text-danger");
output.innerHTML = `${days*100}€`;
} else {
/* if no valid date is entered */
output.classList.add("text-danger");
output.innerHTML = `Select valid dates`;
}
}<section class="sec5">Check in</section>
<section class="sec2"><input class="date" id="startdate" type="date" name="checkin" required=""></section>
<section class="sec5">Check out</section>
<section class="sec2"><input class="date" id="enddate" type="date" name="checkout" required=""></section>
<p>Total price</p>
<section class="sec3" id="totalprice" name="totalprice">--</section>
<div id="btn">CLICK ME!</div>Use change event but apply to both inputs this way:
function daysBetween(startDate, endDate) {
var millisecondsPerDay = 1000 * 60 * 60 * 24;
var startDateUTC = Date.UTC(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
var endDateUTC = Date.UTC(endDate.getFullYear(), endDate.getMonth(), endDate.getDate());
return Math.floor((endDateUTC - startDateUTC) / millisecondsPerDay);
};
function recalculatePrice() {
let startDate = new Date(document.getElementById("startdate").value);
let endDate = new Date(document.getElementById("enddate").value);
let output = document.getElementById("totalprice");
// Get how much days is between these dates
let days = daysBetween(startDate, endDate);
if (days) {
output.classList.remove("text-danger");
output.innerHTML = `${days*100}€`;
} else {
/* if no valid date is entered */
output.classList.add("text-danger");
output.innerHTML = `Select valid dates`;
}
};
document.querySelector("#startdate").addEventListener("change", recalculatePrice, false);
document.querySelector("#enddate").addEventListener("change",recalculatePrice , false);<section class="sec5">Check in</section>
<section class="sec2"><input class="date" id="startdate" type="date" name="checkin" required=""></section>
<section class="sec5">Check out</section>
<section class="sec2"><input class="date" id="enddate" type="date" name="checkout" required=""></section>
<p>Total price</p>
<section class="sec3" id="totalprice" name="totalprice">--</section>
<div id="btn">CLICK ME!</div>Just add:
onchange="daysBetween()"
In your case:
<section class="sec5">Check in</section>
<section class="sec2"><input class="date" onchange="daysBetween()" id="startdate" type="date" name="checkin" required=""></section>
<section class="sec5">Check out</section>
<section class="sec2"><input class="date" onchange="daysBetween()" id="enddate" type="date" name="checkout" required=""></section>
<p>Total price</p>
<section class="sec3" id="totalprice" name="totalprice">--</section>