是否可以将javascript获得的时间提交到表单中？

此按钮显示视频媒体的当前运行时间

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

您希望在表单提交之前使用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);
});

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

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();
});

在表单中添加一些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);
});

相关内容

最新更新

热门标签：