从Webform上的2个输入字段计算总时间

Question

I have a Webform where the user picks a start and end time from a drop list (I truncated the list here). I want to have the total time calculated automatically. This is what I have so far and it works, however it does not submit to my DataBase. However, if I change the span tag to an input tag it does work and submits however it will not work in Chrome, IE only.

 (function(d) { var start = d.getElementById('timeStart'), stop = d.getElementById('timeStop'), diff = d.getElementById('totaltime'); function textReplace(e, txt) { if (e.textContent) e.textContent = txt; else e.innerText = txt; } function addEvent(e, event, handler) { if (e.addEventListener) e.addEventListener(event, handler, false); else e.attachEvent('on' + event, handler); } function selectHours(e) { return new Date( '01/01/1971 ' + e.options[e.selectedIndex].value ).getTime(); } function calcTime(e) { d = new Date(selectHours(stop) - selectHours(start)); textReplace(diff, d.getUTCHours() + ':' + d.getUTCMinutes()); } addEvent(start, 'change', calcTime); addEvent(stop, 'change', calcTime); })(document); 

 <td style="height: 32px; width: 472px;"> <select name="start" id="timeStart" style="width:276px; color: black;background-color:#C1D7EB"> <option value="00:00:00">12:00 am</option> <option value="01:00:00">1:00 am</option> <option value="01:10:00">1:10 am</option> <option value="23:00:00">11:00 pm</option> </select> </td> <td style="height: 32px; width: 472px;"> <select name="end" id="timeStop" style="width:276px; color: black;background-color:#C1D7EB"> <option value="00:00:00">12:00 am</option> <option value="00:30:00">12:30 am</option> <option value="21:00:00">9:00 pm</option> <option value="22:00:00">10:00 pm</option> <option value="23:00:00">11:00 pm</option> </select> <td style="width: 472px"> Difference: <span id="totaltime" name="totaltime"></span> </td> 

Answer 1

If you change the totaltime span to an input, you need to modify your textReplace function as well.

To set the value of an input value, change the function to something similar to this:

   function textReplace(e, txt) {
      e.value = txt;
   }