asp.net + Accessing HiddenField value assigned in JS on Postback from CodeBehind

Question

I am trying to access my hiddenfield values from code behind but I got empty values instead, what I am doing here is setting the 2 hiddenfield values from a Javascript function and after that do a postback via asp:button click. Not sure what am I doing wrong here, please kindly assist:

Thanks.

 <form id="Form1" class="form" runat="server">

            <p class="SearchAddress">
                <asp:TextBox ID="searchTextField" runat="server" />
                <label for="searchTextField">
                    Location</label>
            </p>
            <p class="Date">
                <asp:TextBox ID="txtDate" runat="server">18/10/2012</asp:TextBox>
                <label for="txtDate">
                    Date</label>
            </p>
            <p class="TimeFrom">
                <asp:TextBox ID="TimeFrom" runat="server">18:00</asp:TextBox>
                <label for="txtTimeFrom">
                    Time From</label>
            </p>
            <p class="TimeTo">
                <asp:TextBox ID="TimeTo" runat="server">19:00</asp:TextBox>
                <label for="txtTimeTo">
                    Time To</label>
            </p>

            <p class="submit">
                <asp:Button ID="btnCalculateCoordinates" runat="server" Text="Post It!" 
                  onClientclick="calculateCoordinates();" onclick="btnCalculateCoordinates_Click" 
            />
           </p>

            <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <asp:UpdatePanel ID="uppnlLatLong" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                         <asp:HiddenField ID="txtLatitude" runat="server"  />
                         <asp:HiddenField ID="txtLongitude" runat="server" />
             </ContentTemplate>
           </asp:UpdatePanel>
            </form>

      function calculateCoordinates() {
                    var txtAddress1 = document.getElementById('<%=searchTextField.ClientID%>');
                    var txtLat = document.getElementById('<%=txtLatitude.ClientID%>');
                    var txtLng = document.getElementById('<%=txtLongitude.ClientID%>');

                    var address = txtAddress1.value + ', ';

                    var geocoder;
                    geocoder = new google.maps.Geocoder();

                    geocoder.geocode({ address: address }, function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            var location = results[0].geometry.location;
                            txtLat.value = location.lat(); //SETTING THE HIDDENFIELD VALUE
                            txtLng.value = location.lng(); //SETTING THE HIDDENFIELD  VALUE
                        }
                        else
                            alert('Opps, sorry but we are unable to locate' + $(txtAddress1).val());
                    });
            }
        </script>

Answer 1

You need to put the command generated the event in update panel as well to get the hidden . field values. You need to put all control in update panel those participate in ajax call.

<form id="Form1" class="form" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdatePanel ID="uppnlLatLong" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
                <asp:HiddenField ID="txtLatitude" runat="server"  />
                <asp:HiddenField ID="txtLongitude" runat="server" />
                <asp:Button ID="btnCalculateCoordinates" runat="server" Text="Post It!"  onClientclick="calculateCoordinates();" onclick="btnCalculateCoordinates_Click" />

You can use ajax event begin_request of asp .net to call ajax method before call goes on server.

Sys.WebForms.PageRequestManager.getInstance().remove_beginRequest(beginRequestHandler);

function BeginRequestHandler(sender, args)
{
       calculateCoordinates();
}