0

jQueryを使用してボタンクリックで緯度と経度を取得する2つの非表示フィールドがあります。以下はうまく機能するコードです。これらの緯度と経度を使用して距離を計算したいと思います。テキストボックスとラベルに隠しフィールドの値を表示しようとしているテストのために、jQueryでそれを見ることができます。ただし、ボタン コードでプロパティをOnClientClick="return true"に設定すると、何も機能しません。return 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>
4

2 に答える 2

0

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);
        });
    });
于 2013-06-05T04:00:29.363 に答える