Getting value from a function and put it in a input field

Question

I made a slider function, now i'm trying to get the value from that slider in a hidden input field, so that I can use php with it. Anybody got any idea of doing that?

This the slider javascript

 $( document ).ready(function() {
      //console.log("ready!");

      $(function () {
          var circularSlider = $('#slider').CircularSlider({
              min: 0,
              max: 359,
              value: 0,
              radius: 200,
              labelSuffix: "°",
              slide: function (ui, value) {
                  var colors = ['green', 'red', 'blue', 'yellow', 'pink', 'black'];
                  var color = colors[parseInt(value / 60)];
                  ui.find('.jcs').css({'border-color' : color, 'border-width': '50px' });
                  ui.find('.jcs-indicator').css({'background' : color});
                  ui.find('.jcs-value ').css({'background' : color, 'top': '15%', 'left': '17%' });
                  /*ui.next().css({
                      'background': 'linear-gradient(' + value +
                      'deg, white, cornsilk, white)'
                  });*/

              }
          });
          //window.location.href= "mood.php?uid=" .color;
      });

  });

here is the html of the slider and the input field

<div id="slider"></div>

<button class="moodReady">Ready</button>
<form class="input" action="" method="post">
    <input type="hidden" class="data"/>
</form>

Answer 1

 $( document ).ready(function() { //console.log("ready!"); $(function () { var circularSlider = $('#slider').CircularSlider({ min: 0, max: 359, value: 0, radius: 200, labelSuffix: "°", slide: function (ui, value) { var colors = ['green', 'red', 'blue', 'yellow', 'pink', 'black']; var color = colors[parseInt(value / 60)]; ui.find('.jcs').css({'border-color' : color, 'border-width': '50px' }); ui.find('.jcs-indicator').css({'background' : color}); ui.find('.jcs-value ').css({'background' : color, 'top': '15%', 'left': '17%' }); document.getElementById('hiddenValue').value = value; /*ui.next().css({ 'background': 'linear-gradient(' + value + 'deg, white, cornsilk, white)' });*/ } }); //window.location.href= "mood.php?uid=" .color; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://toolitup.com/assets/js/circular-slider.min.js"></script> <link rel="stylesheet" href="http://toolitup.com/assets/css/circular-slider.min.css" /> <div id="slider"></div> <button class="moodReady">Ready</button> <form class="input" action="" method="post"> <input id="hiddenValue" type="hidden" class="data"/> </form> 

Answer 2

assuming you want to set the color var as input value and assuming its the only element with class data

you can simply set it like this (shortened your code)

  slide: function (ui, value) {
      //...
      var color = colors[parseInt(value / 60)];
      $('.data').val(color);
      //...
  }