将Javascript变量传递给Rails form_for hidden_​​field

Question

我有borrowed一个相当复杂的JS秒表，并且试图将结果时间报告给我的Rails应用程序的数据库。我咨询了很多类似的SO posts，但一直没有得到它的工作。

这里是我的ERB：

<%= form_for @new_log do |f| %> 
... 
<div class="row text-center"> 
    <div class="btn-white" id="startTime" style="display: inline-block;"> 
     <h4 value="start" onclick="start();">Start Timer</h4> 
    </div> 
    <div style="display: inline-block;"> 
     <span id="time" style="color: white"></span><br> 
     <span class="btn-white" value="reset" onclick="reset()">Reset</span> 
    </div> 
    <div class="btn-white" id="stopTime" style="display: inline-block;"> 
     <h4 value="stop" onclick="stop();">Stop Timer</h4> 
    </div> 
    <%= f.hidden_field :duration, id: "duration" %> 

     ... 

    <%= f.submit "Record My Log", id: "submit", class: "btn-ghost" %> 

<% end %> 

这里的JS：

<script> // STOPWATCH 
    var clsStopwatch = function() { 
     // Private vars 
     var startAt = 0; // Time of last start/resume. (0 if not running) 
     var lapTime = 0; // Time on the clock when last stopped in milliseconds 

     var now = function() { 
       return (new Date()).getTime(); 
      }; 

     // Public methods 
     // Start or resume 
     this.start = function() { 
       startAt = startAt ? startAt : now(); 
      }; 

     // Stop or pause 
     this.stop = function() { 
       // If running, update elapsed time otherwise keep it 
       lapTime = startAt ? lapTime + now() - startAt : lapTime; 
       startAt = 0; // Paused 
      }; 

     // Reset 
     this.reset = function() { 
       lapTime = startAt = 0; 
      }; 

     // Duration 
     this.time = function() { 
       return lapTime + (startAt ? now() - startAt : 0); 
      }; 
    }; 

    var x = new clsStopwatch(); 
    var $time; 
    var clocktimer; 

    function pad(num, size) { 
     var s = "0000" + num; 
     return s.substr(s.length - size); 
    } 

    function formatTime(time) { 
     var h = m = s = ms = 0; 
     var newTime = ''; 

     h = Math.floor(time/(60 * 60 * 1000)); 
     time = time % (60 * 60 * 1000); 
     m = Math.floor(time/(60 * 1000)); 
     time = time % (60 * 1000); 
     s = Math.floor(time/1000); 
     ms = time % 1000; 

    newTime = pad(h, 2) + ':' + pad(m, 2) + ':' + pad(s, 2) + ':' + pad(ms, 3); 
    return newTime; 

    // THIS IS THE PART I ADDED, WHICH IS NOT WORKING 
    $('#submit').on('click', function() { 
     $('#duration').val(newTime); 
    }); 
    // MY ADDITION ENDS HERE 
} 

function show() { 
    $time = document.getElementById('time'); 
    update(); 
} 

function update() { 
    $time.innerHTML = formatTime(x.time()); 
} 

function start() { 
    clocktimer = setInterval("update()", 1); 
    x.start(); 
} 

function stop() { 
    x.stop(); 
    clearInterval(clocktimer); 
} 

function reset() { 
    stop(); 
    x.reset(); 
    update(); 
} 
</script> 

希望这将是一个人与JS比我更好的眼睛一个相当简单的修补程序。目前秒表和表单提交仍然有效，但:duration仍记录在数据库中作为nil。

感谢您的帮助！

Answer 1

您的事件方法永远不会被调用，因为formatTime函数在返回之前会返回newTime。尝试移动formatTime功能中的点击功能。请记住将返回值formatTime设置为一个变量，因为newTime将超出范围。