1

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>
<html>
 <head>
    <script>
  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 {
    calculate();
   } 
  }

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

</script>
<body>
  <form>
 <fieldset>
   <legend>Reserve Hotel Room</legend>
   Check-In Date:<br>
   <input type="date" id="checkin" name="checkin" required>
   <br><br>
   Check-Out Date:<br>
   <input type="date" id="checkout" name="checkout" required>
   <br><br>
   Room:
   <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>
   </select>
   <button type="submit" onclick="check()">Submit</button>
   </fieldset>
   </form>
</body>

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.

ChaCol
  • 223
  • 1
  • 7
  • 19
  • 3
    Your question as it stands is too broad. If you break it down in to individual tasks you can easily research them and find your answers. For example - How do you get the value from an input? How do I get the difference between two dates in days? How do I multiply two values? – Rory McCrossan Nov 11 '16 at 09:02
  • You should put `datepicker` for `Check-In Date` and `Check-Out Date` – Bharat Nov 11 '16 at 09:06
  • @BharatPatidar I'm trying to do this using the HTML forms type="date" as datepicker seems a bit complicated to me right now. – ChaCol Nov 11 '16 at 11:02
  • @RoryMcCrossan Sorry, I edited it for more clarification on what I am struggling with. I'm specifically looking on how to get the value from an input to multiply with the difference between the two dates. – ChaCol Nov 11 '16 at 11:04

3 Answers3

1

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(),
    selectedRoomTotalCost;

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

  selectedRoomTotalCost = selectedRoomRate * diffDays;

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

<head>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>

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

<body>
  <div class="center">
    <form>
      <fieldset>
        <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>
        <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>
        <br>
        <br>State:
        <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>
        </datalist>
        Zip Code:
        <input type="text" name="zipcode" placeholder="12345" size="10" pattern="[0-9]+" title="Numbers only." required>
        <br>
        <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="email@domain.com" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required>
        <br>
        <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>
        <br>
        <br>Room:
        <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>
        </select>
        <button type="submit" onclick="check()">Submit</button>
      </fieldset>
    </form>
  </div>
</body>

</html>
sam
  • 931
  • 2
  • 13
  • 26
  • I used something similar to what you have for the function, but how do I take that difference in days and multiple it by the room selected by the user? – ChaCol Nov 11 '16 at 11:03
  • Above `diffDays` will contain the difference in days – sam Nov 11 '16 at 12:51
  • Updated snippet above, to return the cost of stay – sam Nov 11 '16 at 13:02
  • This doesn't let me change the room type? – ChaCol Nov 12 '16 at 03:34
  • @ChaCol `` will bring you only suggestions while typing a value. To get the options to select a room type, you need ` – sam Nov 12 '16 at 06:09
  • All I did was remove selected from the first option and it displayed all of the ones below it afterwards. – ChaCol Nov 12 '16 at 09:36
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/127940/discussion-between-sam-and-chacol). – sam Nov 12 '16 at 09:49
  • Very useful peace of codes – Humphrey Mar 23 '18 at 08:29
0

You can use datepicker() from Jquery-UI and add a function for calculate the datediff.

$("#checkin").datepicker();
$("#checkout").datepicker();

$("#check").click(function(){
  function parseDate(str) {
    var mdy = str.split('/');
    return new Date(mdy[2], mdy[0]-1, mdy[1]);
  }

  function daydiff(first, second) {
    return Math.round((second-first)/(1000*60*60*24));
  }
  
  var CostPerNight = $('#costRoom').val()
  
  totalCost = daydiff(parseDate($('#checkin').val()), parseDate($('#checkout').val())) * CostPerNight;

  alert(totalCost)

})
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="center">
    <form>
      <fieldset>
        <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>
        <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>
        <br>
        <br>State:
        <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>
        </datalist>
        Zip Code:
        <input type="text" name="zipcode" placeholder="12345" size="10" pattern="[0-9]+" title="Numbers only." required>
        <br>
        <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="email@domain.com" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required>
        <br>
        <br>Check-In Date:
        <input type="date" id="checkin" name="checkin" required>Check-Out Date:
        <input type="date" id="checkout" name="checkout" required>
        <br>
        <br>Room:
        <input id="costRoom" list="rooms" name="room" size="16" required>
        <datalist id="rooms">
          <option value="50">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>
        </datalist>
        <br>
        <br>
        <button type="submit" id="check">Submit</button>
      </fieldset>
    </form>
  </div>

Function daydiff source here

UPDATE

Without datpicker you can just add your date with format you want and split on your delimiter.

example:

if you use : 01.02.2017

you just modify split to : var mdy = str.split('.');

Community
  • 1
  • 1
P. Frank
  • 5,691
  • 6
  • 22
  • 50
0

Use a datepicker , set preferred format mm/dd/yyyy else you have to change the date format inside your days calculate function

function calDays(){
    startDate = $('#start-date').val();
    enddate =$('#start-date').val();
    days = Math.round(((new Date(endDate) )- (new Date(startDate) ) )/(3600000*24))
    daysSuffix = " Day";
    if(days > 1){
        daysSuffix = " Days";
    }
    $('#total-days').val(days + daysSuffix)
}
Hitesh Jangid
  • 210
  • 3
  • 10
  • I'm trying to avoid using datepicker. – ChaCol Nov 11 '16 at 11:03
  • without datepicker , your date will identically lost, user my enter sometime mm-dd-yyyy or sometime dd-mm-yyyy or somethime mm/dd/yy – Hitesh Jangid Nov 11 '16 at 11:05
  • I'm using the html form where it is selected through a calendar that pops up so the user isn't typing anything it's just selected the date. I'm pretty sure it doesn't allow the user to type anything other than the format mm-dd-yyyy – ChaCol Nov 11 '16 at 11:07
  • Actually mm-dd is static but yyyy can go beyond 4 digits, if that matters. – ChaCol Nov 11 '16 at 11:08
  • Alright, than there is no problem ... i was suggesting just because identical date format only , what date format is set in the calendar – Hitesh Jangid Nov 11 '16 at 11:09
  • year must be in 4 digit else Date fucntion will return 1916 if we pass 2016 as 16 only – Hitesh Jangid Nov 11 '16 at 11:11