java 点击提交按钮后脚本功能消失

Question

当我点击提交按钮时，传单地图闪烁然后消失。我使用的函数是 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>

Answer 1

您的 GetNewMap 方法不会阻止默认操作。你显示一张新地图，然后表单提交到服务器，你的新地图就会消失。

您需要阻止提交表单：

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

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

Event.preventDefault() - Web APIs | MDN

正如评论中所指出的，另一种方法是将您的 <button type="submit" 更改为 <button type="button"，这不会提交表单。在这种情况下，您需要处理按钮的 click 事件而不是表单的 submit 事件。

Answer 2

您可以尝试删除按钮中的 type="submit" 并使用 onclick 事件：

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

如果你想在 GetNewMap() 中获取 Lat 和 Long 的值，试试这个：

 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);
        }

java 点击提交按钮后脚本功能消失

java script function disappear after clicking on submit button

javascript

c#

leaflet

asp.net-core