asp.net jquery获取隐藏的字段值：按钮点击

Question

我有两个隐藏的字段，获取纬度和经度的按钮点击使用jQuery。下面是代码运行良好，我想用这些lat和lng来计算距离。为了测试我试图在文本框和标签中显示隐藏的字段值，你可以在jQuery中看到。但是，如果我将属性设置为OnClientClick =“返回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"您已经添加到页面controlls， 我们现在确定由ASP.NET生成的ID是一样的。

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

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

Answer 2

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

我也注意到你的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); 
     }); 
    });