Javascript獲取多個選項值和更新表單字段

我正在構建一個頁面供用戶在工作日輸入他們的開始時間和結束時間。然後我希望根據他們的選擇計算計費時間。不知道這是否可能與JavaScript，因爲我已經嘗試了一堆不同的代碼沒有我想要的結果。以下是我目前的位置。Javascript獲取多個選項值和更新表單字段

我是JavaScript新手，非常感謝您提供的任何輸入。

感謝，安德魯

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

來源

2012-12-14 user1882674

你應該包括它做/不做和任何錯誤。對於初學者來說，它執行onload，它應該在按鈕點擊或表單提交。你也不能減去那樣的時間，你需要創建Date對象。 – MrCode

是的，謝謝。我是新來的這個論壇以及編碼，所以非常欣賞這個輸入。 – user1882674

不改變你的代碼太多了，這裏是這個例子： http://jsfiddle.net/tEnyP/

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

主要有兩個區別。首先，我將每個選項的值設置爲從最早可能的開始時間（上午9:00 - > 0，下午5:00 - > 480）的分鐘數，以便最終計算非常容易。第二件事是當計算時間的函數被調用時。請注意每個select元素的'onChange'屬性。這會導致他們在更改時調用'calculateTime'。

在開始編寫應用程序之前，我建議學習jQuery。它使這樣的事情更容易。

來源

2012-12-14 16:34:43

謝謝，這有很多幫助。 – user1882674

你會介意選擇它作爲答案嗎？ –

Javascript獲取多個選項值和更新表單字段

回答

相關問題