javascript - 如何获取用户输入的选定房间并将其乘以两个日期之间的天数差异？

标签 javascript jquery html forms

一旦用户选择了他们想要的房间类型以及他们入住的天数，我如何计算他们的住宿总费用？

我不太确定如何获取用户选择的房间并将其乘以 diffDays 以获得总费用。

<!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>

我将如何执行计算函数，将所选房间的值(value)乘以天数差值？

** 我不想使用日期选择器。

最佳答案

您可以通过以下方式查看天数

// 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;

更新于2016年11月11日:
更新了代码片段以返回成本。

更新于2016年11月12日:
<input list="roomList"> 在输入值时只会为您带来建议。要获取选择房间类型的选项，您需要 <select> 标签。

尝试以下代码片段:

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>

关于javascript - 如何获取用户输入的选定房间并将其乘以两个日期之间的天数差异？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40544351/

上一篇：javascript - jQuery 排序功能无法正常工作

下一篇：Javascript 主函数在内部子函数之前首先触发

相关文章：

jquery - 如何在 JQuery 中创建一个简单的模态对话框？

javascript - document.write() 是做什么的？

javascript - 将处理程序附加到窗口滚动事件

javascript - Luxon.js 获取现在和输入日期之间的差异(以年为单位)

jquery - 如何防止 replaceWith 制作多个文本节点？

javascript - CSS/JS 转换 :translate3d and scrolling - smooth on Android, 在 iPhone 上没有动量

javascript - 是否可以从 WinJS 中的 Windows Phone 8.1 应用程序调用 GPS 设置？

javascript - 访问 jQuery 返回值

javascript - JS改变输入值

javascript - 突出显示多项选择选项

©2024 IT工具网  联系我们