将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将超出范围。