asp:HiddenField get value from JavaScript Variable upon Button Click

Question

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: http://jsfiddle.net/ryn_90/Tq7xK/6/.

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...

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.

This is my javascript code:

    <script>
    $(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 > -30) {
            if (parseInt(data) >= 0 && parseInt(data) <= 30) {
                $("#slider").slider("option", "value", data);
            }
            else {
                if (parseInt(data) < -30) {
                    $("#days").val("-30");
                    $("#slider").slider("option", "value", "-30");
                }
                if (parseInt(data) > 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(<%=deadlineYear%>, <%=deadlineMonth%>, <%=deadlineDay%>);
        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"));
    });
</script>

This is the asp.NET Code:

<div id="sliderPopup" title="Modify Deadline">
    <div id="slider"></div>
    <input type="text" id="days" value="0"/>
    <div id="date"></div>
    <asp:HiddenField ID="ModifiedDeadlineDateFromSlider" />
    <asp:Button ID="DeadlineDateSave" Text="Save Deadline" runat="server"             OnClick="saveDeadline" />
</div>

Please let me know if you need any more information. I would appreciate your answers and comments.

Answer 1

You can set the date value to the hidden field by adding just single line of code. Add the following code inside the slide event and the create event of your .slider function

$("#ModifiedDeadlineDateFromSlider").val(addDaysToDate(parseInt($("#days").val())));

or

$("#ModifiedDeadlineDateFromSlider").val($("#date").text());

Your .slider function will look like this after the modification.

$(function () {
        $("#slider").slider({
            max: 30,
            min: -30,
            value: 0,
            slide: function (event, ui) {
                $("#days").val(ui.value);
                $("#date").text(addDaysToDate(parseInt($("#days").val())));

                $("#ModifiedDeadlineDateFromSlider").val($("#date").text());

            },
            create: function (event, ui) {
                $("#date").text(addDaysToDate(parseInt($("#days").val())));

                $("#ModifiedDeadlineDateFromSlider").val($("#date").text());

            }
        });
    });

P.S. Add the mentioned line of code to create event only if you want to set date in hidden field value on creation of slider also. If you want to set only if date is changes then just add that code in slide event only.

Note: In this particular scenerio it was not working with the changes also. So after discussion and couple of trials we discovered one more thing which was minor but created the problem. asp hidden field's property ClientIDMode was not set to static due to which its ID was changed during rendering and as a result value was not available in code behind late

Hope that helps!

Answer 2

To pass javascript value to c# do this way:

<script type="text/javascript">
function abc()
{
   var str = "yourValue";
   document.getElementById("HiddenField1").value = str;
}
</script>

and then access HiddenField1.Value on code-behind.

To pass c# variable to javascript you can bind public variable like this:

<%=this.YourVariable%>