java script function disappear after clicking on submit button-CodePudding

When I'm clicking on the submit button the leaflet map flashing and then disappear. the function that I'm using is GetNewMap() which means when I'm clicking on the button a new lan-long will pass to it.

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

my view:

<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 >
    <div  style="font-size: 16px;">
1- Enter Radius:
    </div>


<input  type="number" id="radius" name="InputRadius" > 

<div  style="font-size: 16px;">
    Meter 
    </div>
 <div  > 

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

<br>
 <div  id="map" ></div>

CodePudding user response：

Your GetNewMap method does not prevent the default action. You display a new map, and then the form is submitted to the server, and your new map will disappear.

You need to prevent the form from being submitted:

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

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

Event.preventDefault() - Web APIs | MDN

As pointed out in the comments, the alternative is to change your <button type="submit" to a <button type="button", which would not submit the form. In that case, you would need to handle the button's click event rather than the form's submit event.

CodePudding user response：

You can try to remove type="submit" in button and use onclick event:

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

If you want to get the value of Lat and Long in GetNewMap(),try this:

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