ChaCol ChaCol -4 years ago 108
HTML Question

How to take user input selected room and multiple it by the difference in days between two dates?

Once the user selects the type of room they want and how many days they are staying, how do I calculate the total cost of their stay?

I'm not quite sure how to grab the room the user selected and multiple it by the diffDays to get the total cost.

<!DOCTYPE html>
function check() {
var date1 = new Date(document.getElementById('checkin').value);
var date2 = new Date(document.getElementById('checkout').value);
var diff = Math.abs(date2.getTime() - date1.getTime());
var diffDays = Math.ceil(diff / (1000 * 3600 * 24));

if (date1 > date2){
alert("Check-out date must be after check-in date!")
else {

//function calculate();
// if (document.getElementById("standard")
// var report = this.value * 50 * dayDiff;

<legend>Reserve Hotel Room</legend>
Check-In Date:<br>
<input type="date" id="checkin" name="checkin" required>
Check-Out Date:<br>
<input type="date" id="checkout" name="checkout" required>
<select id="room" name="room" onchange="report(this.value)">
<option id="standard" value="50">Standard ($50/night)</option>
<option id="queen" value="75">Queen ($75/night)</option>
<option id="king" value="100">King ($100/night)</option>
<option id="business" value="125">Business ($125/night)</option>
<option id="deluxe" value="150">Deluxe Suite ($150/night)</option>
<button type="submit" onclick="check()">Submit</button>

How would I perform the calculate function to where it takes the value of the room selected and multiplies it by the difference in days?

** I don't want to use datepicker.

Answer Source

You can check the number of days by

// contains the difference in milliseconds
diffDate = (checkOutDate - checkInDate),

// contains the difference in days
diffDays = 1 + (diffDate / 1000 / 60 / 60 / 24);

// total cost for their stay
selectedRoomRate = $("#room").val();
selectedRoomTotalCost = selectedRoomRate * diffDays;

Updated 2016-11-11:
Updated snippet to return the cost.

Updated 2016-11-12:
<input list="roomList"> will bring you only suggestions while typing a value. To get the options to select a room type, you need <select> tag.

Try the following snippet:

function check() {
  var checkInDate = new Date($("#checkin").val()),
    checkOutDate = new Date($("#checkout").val()),
    diffDate = (checkOutDate - checkInDate),
    diffDays = 1 + (diffDate / 1000 / 60 / 60 / 24),
    selectedRoomRate = $("#room").val(),

  if (diffDate < 0) {
    alert("Check-out date must be after check-in date!");

  selectedRoomTotalCost = selectedRoomRate * diffDays;

  alert('Total Cost: $' + selectedRoomTotalCost);
<!DOCTYPE html>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script src=""></script>

  <link rel="stylesheet" href="settings.css">
  <title>Tranquility Hotels Limited</title>

  <div class="center">
        <legend>Reserve Hotel Room</legend>
        First Name:
        <input type="text" name="firstname" placeholder="First Name" size="25" pattern="[A-Za-z-]+" title="Alphabet characters only." required>Last Name:
        <input type="text" name="lastname" placeholder="Last Name" size="25" pattern="[A-Za-z-]+" title="Alphabet characters only." required>
        <br>Street Address:
        <input type="text" name="street" placeholder="1234 Awesome Street" size="30" pattern="[A-Za-z0-9 ]+" title="Alphabet characters and numbers only." required>City:
        <input type="text" name="city" placeholder="Cleveland" size="30" pattern="[A-Za-z ]+" title="Alphabet characters only." required>
        <input list="states" name="state" placeholder="OH" size="10" required>
        <datalist id="states">
          <option value="AL">Alabama</option>
          <option value="AK">Alaska</option>
          <option value="AZ">Arizona</option>
          <option value="AR">Arkansas</option>
          <option value="CA">California</option>
          <option value="CO">Colorado</option>
          <option value="CT">Connecticut</option>
          <option value="DE">Delaware</option>
          <option value="FL">Florida</option>
          <option value="GA">Georgia</option>
          <option value="HI">Hawaii</option>
          <option value="ID">Idaho</option>
          <option value="IL">Illinois</option>
          <option value="IN">Indiana</option>
          <option value="IA">Iowa</option>
          <option value="KS">Kansas</option>
          <option value="KY">Kentucky</option>
          <option value="LA">Louisiana</option>
          <option value="ME">Maine</option>
          <option value="MD">Maryland</option>
          <option value="MA">Massachusetts</option>
          <option value="MI">Michigan</option>
          <option value="MN">Minnesota</option>
          <option value="MS">Mississippi</option>
          <option value="MO">Missouri</option>
          <option value="MT">Montana</option>
          <option value="NE">Nebraska</option>
          <option value="NV">Nevada</option>
          <option value="NH">New Hampshire</option>
          <option value="NJ">New Jersey</option>
          <option value="NM">New Mexico</option>
          <option value="NY">New York</option>
          <option value="NC">North Carolina</option>
          <option value="ND">North Dakota</option>
          <option value="OH">Ohio</option>
          <option value="OK">Oklahoma</option>
          <option value="OR">Oregon</option>
          <option value="PA">Pennsylvania</option>
          <option value="RI">Rhode Island</option>
          <option value="SC">South Carolina</option>
          <option value="SD">South Dakota</option>
          <option value="TN">Tennessee</option>
          <option value="TX">Texas</option>
          <option value="UT">Utah</option>
          <option value="VT">Vermont</option>
          <option value="VA">Virginia</option>
          <option value="WA">Washington</option>
          <option value="WV">West Virginia</option>
          <option value="WI">Wisconsin</option>
          <option value="WY">Wyoming</option>
        Zip Code:
        <input type="text" name="zipcode" placeholder="12345" size="10" pattern="[0-9]+" title="Numbers only." required>
        <br>Phone Number:
        <input type="text" name="phone" size="25" placeholder="440-123-4567" pattern="[0-9]+" title="Numbers only." required>E-mail:
        <input type="email" name="email" size="25" placeholder="" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required>
        <br>Check-In Date:
        <input type="date" id="checkin" name="checkin" value="2015-07-05" required>Check-Out Date:
        <input type="date" id="checkout" name="checkout" value="2015-07-17" required>
        <select id="room" name="room" required>
          <option value="50" selected>Standard ($50/night)</option>
          <option value="75">Queen ($75/night)</option>
          <option value="100">King ($100/night)</option>
          <option value="125">Business ($125/night)</option>
          <option value="150">Deluxe Suite ($150/night)</option>
        <button type="submit" onclick="check()">Submit</button>


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download