title: asp:HiddenField get value from JavaScript Variable upon Button Click
body: <p>I am quite new to JavaScript and jQuery, although I have often used jQuery UI Components, I barely made any modifications before. In this case, I needed to adjust the jQuery Slider to adjust the date, and I created something as the following: <a href="http://jsfiddle.net/ryn_90/Tq7xK/6/" rel="nofollow">http://jsfiddle.net/ryn_90/Tq7xK/6/</a>. </p>
  
  <p>I'm happy with that so far, and now that I got the slider working as I would like it to, I would like to be able to bind a C# HiddenValue from the JavaScript attribute or from the HTML so I can save the date I have. Unless there is any better method to get this value to the backend...</p>
  
  <p>So far I have been able to bind a JavaScript value from c# variables, but have not found out how to do it the other way round.</p>
  
  <p>This is my javascript code: </p>
  
  <pre><code>    &lt;script&gt;
      $(function () {
          $("#dialog").dialog({
              autoOpen: false,
              show: {
                  effect: "blind",
                  duration: 1000
              },
              hide: {
                  effect: "explode",
                  duration: 1000
              }
          });
  
          jQuery(function() {
              var dlg = jQuery("#sliderPopup").dialog({ 
                  draggable: true, 
                  resizable: true, 
                  show: {
                      effect: "blind",
                      duration: 1000
                  },
                  hide: {
                      effect: "explode",
                      duration: 1000
                  },
                  width: 320, 
                  autoOpen: false, 
                  minHeight: 10, 
                  minwidth: 10 
                });
            dlg.parent().appendTo(jQuery("form"));
          });
  
          $("#popupOpener").click(function () {
              $("#dialog").dialog("open");
          });
  
          $("#sliderPopupOpener").click(function () {
              $("#sliderPopup").dialog("open");
          });
      });
  
      $(function () {
          $("#slider").slider({
              max: 30,
              min: -30,
              value: 0,
              slide: function (event, ui) {
                  $("#days").val(ui.value);
                  $("#date").text(addDaysToDate(parseInt($("#days").val())));
              },
              create: function (event, ui) {
                  $("#date").text(addDaysToDate(parseInt($("#days").val())));
              }
          });
      });
  
      $("#days").val($("#slider").slider("value"));
  
      $("#days").change(function (event) {
          var data = $("#days").val();
          if (data.length &gt; -30) {
              if (parseInt(data) &gt;= 0 &amp;&amp; parseInt(data) &lt;= 30) {
                  $("#slider").slider("option", "value", data);
              }
              else {
                  if (parseInt(data) &lt; -30) {
                      $("#days").val("-30");
                      $("#slider").slider("option", "value", "-30");
                  }
                  if (parseInt(data) &gt; 30) {
                      $("#days").val("30");
                      $("#slider").slider("option", "value", "30");
                  }
              }
          }
          else {
              $("#slider").slider("option", "value", "0");
          }
          $("#date").text(addDaysToDate(parseInt($("#days").val())));
      });
  
      function addDaysToDate(days) {
          var mths = new Array("Jan", "Feb", "Mar",
          "Apr", "May", "Jun", "Jul", "Aug", "Sep",
          "Oct", "Nov", "Dec");
  
          var d = new Date(&lt;%=deadlineYear%&gt;, &lt;%=deadlineMonth%&gt;, &lt;%=deadlineDay%&gt;);
          d.setHours(d.getHours() + (24 * days));
  
          var currD = d.getDate();
          var currM = d.getMonth();
          var currY = d.getFullYear();
  
          return mths[currM] + " " + currD + ", " + currY;
      }
  
      jQuery(function() {
         var dlg = jQuery("#sliderPopup").dialog({ 
                              draggable: true, 
                              resizable: true, 
                              show: 'Transfer', 
                              hide: 'Transfer', 
                              width: 320, 
                              autoOpen: false, 
                              minHeight: 10, 
                              minwidth: 10 
                });
        dlg.parent().appendTo(jQuery("form"));
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>This is the asp.NET Code:</p>
  
  <pre><code>&lt;div id="sliderPopup" title="Modify Deadline"&gt;
      &lt;div id="slider"&gt;&lt;/div&gt;
      &lt;input type="text" id="days" value="0"/&gt;
      &lt;div id="date"&gt;&lt;/div&gt;
      &lt;asp:HiddenField ID="ModifiedDeadlineDateFromSlider" /&gt;
      &lt;asp:Button ID="DeadlineDateSave" Text="Save Deadline" runat="server"             OnClick="saveDeadline" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Please let me know if you need any more information. I would appreciate your answers and comments.</p>