javascript - 简单的酒店预订表总计计算

我想知道是否有人可以帮助我...不幸的是，我没有任何Javascript知识，因此很难理解。

我正在填写酒店预订表格，这是我需要做的。您可以选择酒店，也可以选择需要住宿多少晚。

还有一个总计字段。这就是我卡住的地方。有人可以帮我写脚本，或怎么做才能显示“总计”字段，以显示选择酒店的夜晚时间总数？

这也将需要是一个值，该值将与其他值一起发布到php表单中，该表单又将包含这些值的电子邮件发送给我。

这是我制作的表单的链接：https://www.alpinemalta.net/libyabuild2013/bookNow.html

谢谢任何能帮助我的人，请原谅我在这方面的知识不足。

问候

克里斯·布朗（马耳他）

最佳答案

看你的表格，

1）我认为下拉菜单中的总夜数是多余的（从到达和离开的日期起，总夜数是明确的）

2）日期（为了使其更易于在JavaScript中使用）使用数字值，而不是“ 11/05/2013（A）”等。

<select name="ArrivalDate" size="1" id="ArrivalDate">
<option>Please select</option>
<option value="1368399600">13-05-2013</option>
<option value="1368486000">14-05-2013</option>
...
</select>

3）我没有注意到每晚的价格吗？也许酒店列表可能还包含一些ID（例如h1a，h1b，h2a，h3a，h3b，h3c等），而不是文本选项描述（酒店和客房）

<select name="hotel_choice" id="hotel5">
<option value="nothing" selected="selected">None Selected</option>
<option value='nothing'>.</option>
<option value="h1a">Corinthia Single Room</option>
<option value="h1b">Corinthia Double Room</option>
<option value='nothing'>.</option>
...
</select>

如果这样做的话，JavaScript可能不会那么复杂（假设您进行了这些更改并且不介意在页面源中显示每个酒店的价格）：

<script type='text/javascript'>
var prices={nothing:0,h1a:357,h1b:280.50,h2a:380}; //here are your hotel prices

function calculate() {
    var days = Math.round( (
            document.getElementById('datedepart').value -
            document.getElementById('ArrivalDate').value
        ) / 86400 ); //timestamp is in seconds
    document.getElementById('total_cost').value =
        days *
        prices[ document.getElementById('hotel5').value ];
}
</script>

请注意，代码中没有任何细微之处，它基于以下假设：将日期更改为它们的代表整数值（例如php函数time（）返回的值），也有可能我出错了在元素的ID名称中

然后剩下的就是连接“ calculate（）;”。 javascript函数来对所有控件进行onchange事件，您就完成了。

<select name="hotel_choice" id="hotel5"  onchange='calculate();'>
...
</select>

和

<select name="ArrivalDate" size="1" id="ArrivalDate" onchange='calculate();'>
...
</select>

与出发日期选择器中的相同。

编辑：

您可以在日期选择器中使用日期，但必须使用以下方法将该字符串解析为数字客户端：

var dt=Date.parse(document.getElementById('ArrivalDate').value);

但是请确保检查此功能支持的日期格式，并注意它返回自1970年以来的毫秒数，因此您必须除以86400000而不是86400

编辑-检查日期是否已填写

function calculate() {
var dd=document.getElementById('datedepart');
var da=document.getElementById('ArrivalDate');
var total=document.getElementById('total_cost');
var hotel=document.getElementById('hotel5');

//no hotel room selected or not depart date set or not arrival date set
//or departing before arrival (nonsense) - set total to ZERO and exit the function

if ( !(dd.value*1) || !(da.value*1) || da.value>dd.value ) {
    total.value='0';//you can set it to 'not allowed' also if you wish (instead of '0')
    return;
}

var days = Math.round( (
        dd.value -
        da.value
    ) / 86400 ); //timestamp is in seconds
var cost = days * prices[ hotel.value ];
if (isNaN(cost))
    cost = 0; //or set to "invalid input" - but this line should not be needed at this point
total.value = cost;
}