title: Get value from Javascript to Input type Hidden
body: <p>I am just trying to add code in this javascript to get values of slide to input type="hidden", but i can't get value into input type="hidden", what do I do wrong? Anyway, thanks for your help!</p>
  
  <p>This is javascript code:</p>
  
  <pre><code>// &lt;![CDATA[
  var hWidth, bWidth;
  
  function setBgPos(v) {
      var off = v * hWidth;
      var pos = -bWidth + (v * bWidth);
      $('slider').setStyle({backgroundPosition: Math.round(pos - off) + 'px'});
  }
  
  function setSlideOutput(v) {
      $('percent').innerHTML = Math.round(v * 100) + '%';
  }
  
  Event.observe(window, 'load', function() {
      hWidth = $('slider-handle').getWidth();
      bWidth = $('slider-bar').getWidth();
      var slide = new Control.Slider('slider-handle', 'slider-bar', {
          sliderValue: 0.25,
          onSlide:
              function(v) {
                  setBgPos(v);
                  setSlideOutput(v);
                  $('percentage').value = Math.round(v * 100) + '%';
              },
          onChange:
              function(v) {
                  setBgPos(v);
                  setSlideOutput(v);
                  $('percentage').value = Math.round(v * 100) + '%';
              }
      });
      setBgPos(slide.value);
      setSlideOutput(slide.value);
  });
  // ]]&gt;
  </code></pre>
  
  <p>Html:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html lang="nl"&gt;
      &lt;head&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"&gt;&lt;/script&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js"&gt;&lt;/script&gt;
  &lt;style&gt;
  #slider, #slider-bar, #slider-handle {
      border: 0;
      padding: 0;
      margin: 0;
  }
  #slider {
      width: 300px;
      height:42px;
      background: url(img/bg.gif) no-repeat -300px;
      margin-left: 42px;
  }
  #slider-bar {
      width:300px;
      height:42px;
      background: url(img/track.png) no-repeat;
  }
  #slider-handle {
      width:42px;
      height:42px;
      cursor:move;
      background: url(img/gripper.png) no-repeat;
  }
  #percent {
      font-size: 75%;
      font-family: arial;
      font-weight: bold;
      text-align: center;
      padding-top: 1.1em;
  }
  &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div id="slider"&gt;
      &lt;div id="slider-bar"&gt;
      &lt;div id="slider-handle"&gt;&lt;p id="percent"&gt;&lt;/p&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;input type="hidden" id="percentage" name="percentage" value="0" /&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>