2

此按钮显示视频媒体的当前经过时间

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

4 回答 4

3

您想在提交表单之前使用 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);
});
于 2013-08-21T01:34:41.510 回答
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();
});
于 2013-08-21T01:35:08.417 回答
2

在不使用 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>

并将此 JavaScript 添加到您的<head>：

<script>
    function onFormSubmit() {
        var element = document.getElementsByName("comment[elapsed_time]")[0];
        element.value = Math.floor(document.getElementById('video').currentTime);
        return true;
    }
</script>
于 2013-08-21T01:37:15.287 回答
1

向您的表单添加一些 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);
});
于 2013-08-21T01:35:51.327 回答