0

I'm trying to figure out how to calculate the amount of days between the user's input of the check-in date and the check-out date. I need to take that number and multiple it by the room choice they selected to get the grand total cost for their stay and display it somewhere on the screen.

I'm not entirely sure how to calculate the number of days, but for getting the cost of the room would I need to assign an id to each type of room and assign it a numerical value instead of the current setup I have now? Or how else can you assign a value to the selection of each room?

<script>
   function check() {
    if(document.getElementById('checkin').value > document.getElementById('checkout').value)
     { 
      alert("Check-out date must be after check-in date!")
    }
   }
   
   //function result() {
    //document.getElementById('standard').value * 
   //}
</script>

 <body>
     <form>
   <fieldset>
   <legend>test</legend>
   First Name: <br>
   <input type="text" name="firstname" size="45" pattern="[A-Za-z]+" title="Alphabet characters only." required>
   <br><br>
   Last Name: <br>
   <input type="text" name="lastname" size="45" pattern="[A-Za-z]+" title="Alphabet characters only." required>
   <br><br>
   Street Address: <br>
   <input type="text" name="street" size="45" pattern="[A-Za-z0-9 ]+" title="Alphabet characters and numbers only." required>
   <br><br>
   City: <br>
   <input type="text" name="city" size="45" pattern="[A-Za-z ]+" title="Alphabet characters only." required>
   <br><br>
   State: <br>
   <input list="states" name="state" size="45" 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>
   <br><br>
   Zip Code: <br>
   <input type="text" name="zipcode" size="45" pattern="[0-9]+" title="Numbers only." required>
   <br><br>
   Phone Number: <br>
   <input type="text" name="phone" size="45" pattern="[0-9-]+" title="Numbers only." required>
   <br><br>
   E-mail: <br>
   <input type="email" name="email" size="45" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required>
   <br><br>
   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:<br>
   <input list="rooms" name="room" size="16" required>
    <datalist id="rooms">
     <option value="Standard ($50/night)">
     <option value="Queen ($75/night)">
     <option value="King ($100/night)">
     <option value="Business ($125/night)">
     <option value="Deluxe Suite ($150/night)">
    </datalist>
   <br><br>
   <button type="submit" onclick="check()">Submit</button>
   </fieldset>
   </form>
</body>
ChaCol
  • 223
  • 1
  • 7
  • 19

1 Answers1

3

<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 noofdays = Math.ceil(diff / (1000 * 3600 * 24));  
  if(date1  > date2){ 
 alert("Check-out date must be after check-in date!")
  }
  else {
    alert(noofdays);
  }
}  
</script>
<body>
  <form>
 <fieldset>
   <legend>test</legend>
   First Name: <br>
   <input type="text" name="firstname" size="45" pattern="[A-Za-z]+" title="Alphabet characters only." required>
   <br><br>
   Last Name: <br>
   <input type="text" name="lastname" size="45" pattern="[A-Za-z]+" title="Alphabet characters only." required>
   <br><br>
   Street Address: <br>
   <input type="text" name="street" size="45" pattern="[A-Za-z0-9 ]+" title="Alphabet characters and numbers only." required>
   <br><br>
   City: <br>
   <input type="text" name="city" size="45" pattern="[A-Za-z ]+" title="Alphabet characters only." required>
   <br><br>
   State: <br>
   <input list="states" name="state" size="45" 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>
   <br><br>
   Zip Code: <br>
   <input type="text" name="zipcode" size="45" pattern="[0-9]+" title="Numbers only." required>
   <br><br>
   Phone Number: <br>
   <input type="text" name="phone" size="45" pattern="[0-9-]+" title="Numbers only." required>
   <br><br>
   E-mail: <br>
   <input type="email" name="email" size="45" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required>
   <br><br>
   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:<br>
   <input list="rooms" name="room" size="16" required>
    <datalist id="rooms">
     <option value="Standard ($50/night)">
     <option value="Queen ($75/night)">
     <option value="King ($100/night)">
     <option value="Business ($125/night)">
     <option value="Deluxe Suite ($150/night)">
    </datalist>
   <br><br>
   <button type="submit" onclick="check()">Submit</button>
   </fieldset>
   </form>
</body>
priya_singh
  • 2,478
  • 1
  • 14
  • 32