將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將超出範圍。