ASP.NET, jquery get hidden fields values on asp:button click

Question

I have two hidden fields which get latitude and longitude on a button click using jQuery. Below is the code working good, I want to calculate the distance using these lat and lng. For testing Im trying to show the hidden field value in textbox and label, you can see that in jQuery. However if I set the property as OnClientClick="return true" in button code I dont see anything working. If I set as return false I can see the values but not in label.

<script type="text/javascript">
    $(function () {
        geocoder = new google.maps.Geocoder();

        $("#btn").on("click", function () {
            var address = $("#tbCity").val();
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var lat = results[0].geometry.location.lat();
                    var lng = results[0].geometry.location.lng();

                    //alert(latitude + ", " + longitude);
                }

                $('#latitude').val(lat);
                $('#longitude').val(lng);
                $('#txtBox1').val($('#latitude').val());   
                $('#txtBox2').val($('#longitude').val());
                $('#lbl1').val($('#latitude').val());
            });
        });
    });
</script>

ASP.NET code

<form id="form1" runat="server">
     Address: <asp:TextBox ID="tbCity" runat="server"></asp:TextBox>        
     <asp:HiddenField ID="latitude" runat="server" />
     <asp:HiddenField ID="longitude" runat="server" />
     <br /><br />
     <asp:TextBox ID="txtBox1" runat="server"></asp:TextBox>
     <asp:TextBox ID="txtBox2" runat="server"></asp:TextBox>
     <asp:Button ID="btn" runat="server" Text="Button" OnClientClick="return false"  OnClick="btn_Click"/>
     <br />
     <asp:Label ID="lbl1" runat="server" Text="Label"></asp:Label>
</form>

Generated HTML code

    <form method="post" action="GetCoordinates.aspx" id="form2">
         <div class="aspNetHidden">
            <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"   value="/wEPDwUKLTQyNTI1OTg4N2RkGXXMNhEfkB7Ie6CVb4YTwItExhof/IkHpdh6f26grxc=">
         </div>
        <div class="aspNetHidden">
             <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION"  value="/wEdAAeWsE0BRbQ0wjG1w60jqqdcq35qZMbaIVF3xrHN6flGNv+/yOgSqO/6irT+NtXuduQ93hcP/MBYTB//29SOqPZfAcmup7kkBHBfToLV39zc8Mj6eKFRARwXIj8IINCyLct0YEyduRVooG3ha/OFYKMXG9w1RtaOWHfqueLltflOGuLDyL1I+PDm4fhtuLq7nGM=">
        </div>
        Address: <input name="tbCity" type="text" id="Text1">        
                 <input type="hidden" name="latitude" id="Hidden1" value="-34.92862119999999">
                 <input type="hidden" name="longitude" id="Hidden2" value="138.5999594">       
                 <input name="txtBox1" type="text" id="Text2">
                 <input name="txtBox2" type="text" id="Text3">
                 <input type="submit" name="btn" value="Button" onclick="return false;" id="Submit1">        
        <span id="Span1">Label</span>
     </form>

Updated code

<form method="post" action="GetCoordinates.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEyMTQwNTA2MzFkZBAUxV0uM2MNtGYuUK81rFUmmAiaeLksG6QHsLB3zWtZ">
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAci5mChXqDZFj3vgdOgA11rq35qZMbaIVF3xrHN6flGNv+/yOgSqO/6irT+NtXuduQ93hcP/MBYTB//29SOqPZfAcmup7kkBHBfToLV39zc8Mj6eKFRARwXIj8IINCyLct0YEyduRVooG3ha/OFYKMX/9MR/+s9E/Yu8cFwBQ5SCqt4ngV9Kdj9/OR/r/Q8mvQ=">
</div>
    Address: <input name="tbCity" type="text" id="tbCity">        
    <input type="hidden" name="latitude" id="latitude" value="-34.92862119999999">
    <input type="hidden" name="longitude" id="longitude" value="138.5999594">     
    <br><br>
    <input name="txtBox1" type="text" id="txtBox1">
    <input name="txtBox2" type="text" id="txtBox2">        
    <input name="btn" type="button" id="btn" value="showCode">
    <span id="lbl1">Label</span>
</form>

Updated .Net code

<form id="form1" runat="server">
    Address: <asp:TextBox ID="tbCity" ClientIDMode="Static"  runat="server"></asp:TextBox>
    <asp:HiddenField ID="latitude" ClientIDMode="Static" runat="server" />
    <asp:HiddenField ID="longitude" ClientIDMode="Static"  runat="server" />
    <br /><br />
    <asp:TextBox ID="txtBox1" ClientIDMode="Static"  runat="server"></asp:TextBox>
    <asp:TextBox ID="txtBox2" ClientIDMode="Static"  runat="server"></asp:TextBox>
    <input type="button"   id="btn" runat="server"  value="showCode" />
    <br />
    <asp:Label ID="lbl1" runat="server" ClientIDMode="Static" Text="Label"></asp:Label>
</form>

Answer 1

With ClientIDMode="Static" you've added to page controlls, we're now sure the ID generated by ASP.NET is the same.

So now, your code works correctly, except your label. As <asp:Label /> is rendered as an <span> tag, so you must use .text() method instead of .val() :

$('#lbl1').text($('#latitude').val());

Answer 2

For testing purposes, you can remove both the OnClientClick="return false" and OnClick="btn_Click" . Your jquery code will handle the click event.

I also noticed your ids are different than the generated html. Try this updated code.

    $("#Submit1").on("click", function (e) {
        e.preventDefault();
        var address = $("#tbCity").val();
        var lat, lang;
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                lat = results[0].geometry.location.lat();
                lang = results[0].geometry.location.lng();

                //alert(latitude + ", " + longitude);
            }

            $('#Hidden1').val(lat);
            $('#Hidden2').val(lang);
            $('#Text2').val(lat);   
            $('#Text3').val(lang);
            $('#Span1').val(lat);
        });
    });