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.

you want to assign the textbox value to asp:hidden by javascript right...? — Pandian
– Pandian, Commented Mar 13, 2013 at 9:37
@Pandian, Yes. I might change the textbox to a hidden html field instead, but that is irrelevant. The most important thing is that I can retrieve the value from my backend c# code. — Ryan S
– Ryan S, Commented Mar 13, 2013 at 9:41

Raman · Accepted Answer · 2013-03-13 12:19:03Z

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!

edited Mar 13, 2013 at 12:19

answered Mar 13, 2013 at 10:09

Raman

1,37610 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Ryan S Over a year ago

Although I understand your code and it makes sense. It is not working for me. I am trying to output the value but it is not working.

Raman Over a year ago

@RyanSammut .... ahh... I missed the # from jQuery selected. Sorry my bad. I am editing my answer. Can you check after adding # in both the lines.

Raman Over a year ago

@RyanSammut .. made one more modification, using .val() instead of .value. Please check with the modified code.

Ryan S Over a year ago

I copied your code, and tried to output it to an asp.NET Label to see whether any value is being passed. But it is not working yet. This is what I am doing in the backend: deadlineDateUpdatedLabel.Text = ModifiedDeadlineDateFromSlider.Value.ToString(); when the button is triggered. I have checked and the event is triggered successfully, the only problem is the value. Any thoughts?

Ryan S Over a year ago

I have managed to get it update a html text box. So your approach is correct, the only thing I cannot do yet is update the asp:HiddenField so far...

|

Eugene Pavlov · Accepted Answer · 2013-03-13 09:43:24Z

1

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

answered Mar 13, 2013 at 9:43

Eugene Pavlov

6985 silver badges18 bronze badges

1 Comment

Ryan S Over a year ago

Your approach is also good, I chose Raman's answer because he pointed out how I can get it to work within my application. Thanks a lot Eugene :)

Collectives™ on Stack Overflow

asp:HiddenField get value from JavaScript Variable upon Button Click

2 Answers 2

10 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related