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 に答える
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 に答える