Question

我有两个隐藏的字段，使用jQuery点击按钮获取经度和经度。下面的代码工作正常，我想用lat和lng来计算距离。为了测试我试图在文本框和标签中显示隐藏的字段值，你可以在jQuery中看到它。但是，如果我在按钮代码中将属性设置为 OnClientClick =“return true”，我看不到任何有效的内容。如果我设置为返回false ，我可以看到值，但不能看到标签。

<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代码

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

生成的HTML代码

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

更新了代码

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

更新了.Net代码

<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

Working jsFiddle Demo

您已将ClientIDMode="Static"添加到页面控件中，我们现在确定ASP.NET生成的ID是一样的。

现在，您的代码正常工作，除了您的标签。由于<asp:Label />呈现为<span>标记，因此您必须使用.text()方法而不是.val()：

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

Answer 2

出于测试目的，您可以删除OnClientClick="return false"和OnClick="btn_Click"。您的jquery代码将处理click事件。

我还注意到你的id与生成的html不同。试试这个更新的代码。

    $("#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);
        });
    });

ASP.NET，jquery在asp：button按钮上获取隐藏字段值

2 个答案: