單擊提交按鈕后java腳本功能消失-有解無憂

當我單擊提交按鈕時，傳單地圖閃爍然后消失。我正在使用的函式是 GetNewMap() 這意味著當我單擊按鈕時，一個新的 lan-long 將傳遞給它。

js：

function GetNewMap() {
    
  
var map = L.map('map').setView([51.509865, -0.118092], 12);


 
   L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1

}).addTo(map);
}

我的觀點：

<form method="get" name="mynewMap" onsubmit="GetNewMap()"> 
 <input type="text" id="Lat" name = "Lat" style="display: none;"> 
<input type="text" id="Long" name = "Long" style="display: none;">

<div class="form-gro row ">
    <div class="col-auto m-2" style="font-size: 16px;">
1- Enter Radius:
    </div>


<input class="col-sm-2 form-control" type="number" id="radius" name="InputRadius" > 

<div class="col-auto m-2" style="font-size: 16px;">
    Meter 
    </div>
 <div class="col-auto offset-3" > 

     <button type="submit"  class="btn btn-info " style="width: 175px;" >Get Tags</button>
   
 </div>
</div>
</form>

<br>
 <div class="col-9" id="map" ></div>

uj5u.com熱心網友回復：

您的GetNewMap方法不會阻止默認操作。您顯示一個新地圖，然后將表單提交到服務器，您的新地圖將消失。

您需要阻止提交表單：

<form method="get" name="mynewMap" onsubmit="GetNewMap(event)">

function GetNewMap(e) {
    e.preventDefault();
    ...

Event.preventDefault() - Web API | MDN

正如評論中所指出的，另一種方法是將您的更改<button type="submit"為 a <button type="button"，這不會提交表單。在這種情況下，您需要處理按鈕的click事件而不是表單的submit事件。

uj5u.com熱心網友回復：

您可以嘗試洗掉type="submit"按鈕并使用onclick事件：

<button class="btn btn-info " style="width: 175px;" onclick="GetNewMap()">Get Tags</button>

如果你想得到Lat和Longin的值GetNewMap()，試試這個：

 function GetNewMap() {

            var Lat = $("#Lat").val();
            var Long = $("#Long").val();
            var map = L.map('map').setView([51.509865, -0.118092], 12);



            L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
                attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
                maxZoom: 18,
                id: 'mapbox/streets-v11',
                tileSize: 512,
                zoomOffset: -1

            }).addTo(map);
        }

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/414091.html

標籤：

上一篇：僅當IIS網站正在運行/非空閑時如何呼叫WebApi

下一篇：如何手動創建控制器即服務？