Fatal编程技术网
  • javascript/
  • Javascript获取多个选项值并更新表单字段

Javascript获取多个选项值并更新表单字段

javascript forms

Javascript获取多个选项值并更新表单字段,javascript,forms,option,Javascript,Forms,Option,我正在构建一个页面，供用户输入工作日的开始和结束时间。然后，我希望计费小时数根据他们的选择进行计算。我不确定javascript是否可以实现这一点，因为我已经尝试了大量不同的代码，但没有得到我想要的结果。下面是我目前所在的位置 我是javascript新手，非常感谢您提供的任何意见 谢谢， 安德鲁 选择开始时间 上午9点 上午9:15 上午9:30 上午9:45 选择结束时间 下午五点 下午五时十五分 下午5:30 下午5:45 你停下来吃午饭了吗？ 是的，我们吃了。 没有用膳时间。 计

我正在构建一个页面，供用户输入工作日的开始和结束时间。然后，我希望计费小时数根据他们的选择进行计算。我不确定javascript是否可以实现这一点，因为我已经尝试了大量不同的代码，但没有得到我想要的结果。下面是我目前所在的位置

我是javascript新手，非常感谢您提供的任何意见

谢谢， 安德鲁


选择开始时间
上午9点
上午9:15
上午9:30
上午9:45


选择结束时间
下午五点
下午五时十五分
下午5:30
下午5:45


你停下来吃午饭了吗？
是的，我们吃了。
没有用膳时间。


计费小时数
window.onload=函数（）{
var time1=document.getElementById（“开始时间”）.options[document.getElementById（“开始时间”）.selectedIndex].value；
var time2=document.getElementById（“结束时间”）.options[document.getElementById（“结束时间”）.selectedIndex].value；
var mealbreak=document.getElementById（“mealbreak”）.options[document.getElementById（“mealbreak”）.selectedIndex].value；
var billable=time2-time1-mealbreak；
计费小时数=document.getElementById（“计费小时数”）；
函数（）{
计费时数=计费时数；
};
};
在不过度更改代码的情况下，下面是一个示例： 


选择开始时间
上午9点
上午9:15
上午9:30
上午9:45


选择结束时间
下午五点
下午五时十五分
下午5:30
下午5:45


你停下来吃午饭了吗？
是的，我们吃了。
没有用膳时间。


计费小时数：
函数计算时间（）{
var time1=document.getElementById（“开始时间”）.options[document.getElementById（“开始时间”）.selectedIndex].value；
var time2=document.getElementById（“结束时间”）.options[document.getElementById（“结束时间”）.selectedIndex].value；
var mealbreak=document.getElementById（“mealbreak”）.options[document.getElementById（“mealbreak”）.selectedIndex].value；
var billable=（time2-time1-mealbreak）/60；
document.getElementById（'billable_hours'）。value=billable；
};
有两个主要区别。首先，我将每个选项的值设置为从最早可能的开始时间（上午9:00->0，下午5:00->480）开始的分钟数，以使最终计算非常容易。第二件事是何时调用计算时间的函数。请注意每个select元素的“onChange”属性。这使它们在更改时调用“calculateTime”

在进一步编写应用程序之前，我建议您学习jQuery。这样的事情会变得容易得多。

你应该包括它做什么/不做什么和任何错误。对于刚开始执行onload的人，它应该是一个按钮单击或表单提交。而且你不能像那样减去时间，你需要创建日期对象。是的，谢谢。我是这个论坛的新手，也不熟悉编码，所以非常感谢大家的意见。谢谢，这帮了我很大的忙。 
<select id="start_time" name="start_time">
         <option value="" selected="selected" disabled>Choose start time</option>
        <option value="09:00:00">9:00 AM</option>
        <option value="09:15:00">9:15 AM</option>
        <option value="09:30:00">9:30 AM</option>
        <option value="09:45:00">9:45 AM</option>
</select>
<br>
<select name="end_time">
         <option value="" selected="selected" disabled>Choose end time</option>
        <option value="17:00:00">5:00 PM</option>
        <option value="17:15:00">5:15 PM</option>
        <option value="17:30:00">5:30 PM</option>
        <option value="17:45:00">5:45 PM</option>
</select>
<br>
<select name="mealbreak" id="mealbreak">
         <option value="" selected="selected" disabled>Did you stop for lunch?</option>
        <option value="00:30:00">Yes, we ate.</option>
        <option value="00:00:00">No meal breaks.</option>
</select>       
<br>
Billable Hours<input type="text" id="billable_hours" name="billable_hours">

<script>
window.onload = function () {
var time1 = document.getElementById("start_time").options[document.getElementById("start_time").selectedIndex].value;
var time2 = document.getElementById("end_time").options[document.getElementById("end_time").selectedIndex].value;
var mealbreak = document.getElementById("mealbreak").options[document.getElementById("mealbreak").selectedIndex].value;
var billable = time2 - time1 - mealbreak;
    billable_hours = document.getElementById('billable_hours');

function () {
    billable_hours.value = billable.value;
  };
};
</script>

<html>
<body>
<select id="start_time" name="start_time" onChange="calculateTime();">
         <option value="" selected="selected" disabled>Choose start time</option>
        <option value="0">9:00 AM</option>
        <option value="15">9:15 AM</option>
        <option value="30">9:30 AM</option>
        <option value="45">9:45 AM</option>
</select>
<br>
<select id="end_time" name="end_time" onChange="calculateTime();">
         <option value="" selected="selected" disabled>Choose end time</option>
        <option value="480">5:00 PM</option>
        <option value="495">5:15 PM</option>
        <option value="510">5:30 PM</option>
        <option value="525">5:45 PM</option>
</select>
<br>
<select name="mealbreak" id="mealbreak" onChange="calculateTime();">
         <option value="" selected="selected" disabled>Did you stop for lunch?</option>
        <option value="30">Yes, we ate.</option>
        <option value="0">No meal breaks.</option>
</select>       
<br>
Billable Hours: <input type="text" id="billable_hours"/>

<script>
function calculateTime() {
    var time1 = document.getElementById("start_time").options[document.getElementById("start_time").selectedIndex].value;
    var time2 = document.getElementById("end_time").options[document.getElementById("end_time").selectedIndex].value;
    var mealbreak = document.getElementById("mealbreak").options[document.getElementById("mealbreak").selectedIndex].value;
    var billable = (time2 - time1 - mealbreak)/60;

    document.getElementById('billable_hours').value = billable; 
};
</script>
</body>
</html>