Question

此按钮显示视频媒体当前已用时间

<button name="test" onclick="alert(Math.floor(document.getElementById('video').currentTime) + 'secs elapsed!');">Show elapsed time</button>

这段经过的时间显然每时每刻都在变化。

是否可以将此经过时间提交给表格？
如何自定义以下代码？

<form action="/comments" method="post" >
    <input type="text" name="comment[body]" size="50" />
    <input type="hidden" name="comment[elapsed_time]" value="???????" />
    <button type="submit" >Submit!</button>
</form>

Answer 1

您希望在提交表单之前使用jQuery设置值

$("form").submit(function(event) {
  var video = $("#video"),
      time  = Math.floor(video.currentTime) + 'secs elapsed!');
  $(this).find("input[name=comment\\[elapsed_time\\]").val(time);
});

如果你（可以）在输入中添加id属性，那就更容易了

<input type="hidden" name="comment[elapsed_time]" id="comment_elapsed_time">

然后你的jQuery变成了这个

$("form").submit(function(event) {
  var video = $("#video"),
      time  = Math.floor(video.currentTime) + 'secs elapsed!');
  $("#comment_elapsed_time").val(time);
});

Answer 2

HTML更改：

<form action="/comments" method="post" >
    <input type="text" name="comment[body]" size="50" />
    <input id="elapsed_time" type="hidden" name="comment[elapsed_time]" value="???????" />
    <button type="submit" >Submit!</button>
</form>

JS：

$('button').on('click', function(){
  $('#elapsed_time').val($('#video')[0].currentTime);

  //now submit the form if you want tp
  $('form').submit();
});

Answer 3

不使用jQuery，您可以将html更改为：

<form action="/comments" method="post" onsubmit="onFormSubmit()" >
    <input type="text" name="comment[body]" size="50" />
    <input type="hidden" name="comment[elapsed_time]" />
    <button type="submit" >Submit!</button>
</form>

并在<head>中添加此JavaScript：

<script>
    function onFormSubmit() {
        var element = document.getElementsByName("comment[elapsed_time]")[0];
        element.value = Math.floor(document.getElementById('video').currentTime);
        return true;
    }
</script>

Answer 4

在表单中添加一些ID以便于操作，这是没有必要的。

<form action="/comments" method="post" >
    <input type="text" name="comment[body]" size="50" />
    <input id="elapsedTimeTextBox" type="hidden" name="comment[elapsed_time]" value="???????" />
    <button id="submitButton" type="submit" >Submit!</button>
</form>

如果使用jQuery

，

在提交按钮中挂钩事件

$('#submitButton').click (function () {
   $('#elapsedTimeTextBox').val(Math.floor(document.getElementById('video').currentTime);
});

是否可以将通过javascript获得的时间提交给表单？

4 个答案: