How to stop a page from auto save after you have dropped a pin on an Esri Map?

[SiyabongaKubeka]

I am working on an MVC project. I have integrated an Esri map in the view. Previously I could drop a pin on the map and get the coordinates and save them. But most recently, something went wrong, I do not know what it is. For some reason when I drop a pin on the map, a save even is triggered and it saves all the other data except the coordinates. It also closes the page. I have investigated, I cant pin point the problem. Please assist. Please see code to integrate the map on the view below:

<script type="text/javascript">
  var latitude;
  var longitude;
  var zoomLevel;
  require(["esri/views/MapView", "esri/WebMap", "esri/config", "esri/widgets/Sketch", "esri/layers/GraphicsLayer"],
    function (MapView, WebMap, esriConfig, Sketch, GraphicsLayer) {
      esriConfig.portalUrl = "https://portal.environment.gov.za/portal";
      var webmap = new WebMap({
        portalItem: {
          id: "04582be14885483da48f29398960f653"
        }
      });
      var graphicsLayer = new GraphicsLayer();
      var view = new MapView({
        map: webmap,
        //zoom: 14,                
        container: "viewDiv"
      });
      var symbol = {
        type: "simple-marker",
        // autocasts as new SimpleMarkerSymbol()                
        style: "circle",
        color: "blue",
        size: "8px", // pixels                
        outline: { // autocasts as new SimpleLineSymbol()                    
          color: [255, 255, 0],
          width: 1 // points                
        }
      };
      webmap.layers.add(graphicsLayer);
      var sketch = new Sketch({
        layer: graphicsLayer,
        view: view,
        symbol: symbol,
        creationMode: "update",
        availableCreateTools: ["point"]
        //container: "viewDiv"            
      });
      view.ui.add(sketch, {
        position: "top-right"
      });
      //Listen to sketch widget's create event.             
      sketch.on('create', function (event) {
        // check if the create event's state has changed to complete indicating                 
        // the graphic create operation is completed.            
        if (view.zoom >= 11) {
          let gra = event.graphic.clone();
          event.graphic.layer.removeAll();
          gra.symbol.color = "red";
          gra.layer.add(gra);
          console.log(view.zoom);
          console.log("X = ", gra.geometry.x);
          console.log("Y = ", gra.geometry.y);
          latitude = gra.geometry.x;
          longitude = gra.geometry.y;
          zoomLevel = view.zoom;
          debugger;
        } else {
          alert("please zoom in");
          event.graphic.layer.remove(event.graphic);
        }
      });
    });

  function saveCoordinates() {
    debugger;
    $("#lat").val(latitude);
    $("#long").val(longitude);
  };
</script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

How the map is added:

<div class="panel-body">
  <div class="form-group">
    <div id="viewDiv" style="position:relative; width:900px; height:600px; border:1px solid #000;"></div>
  </div>
</div>‍‍‍‍‍‍‍‍‍‍

Then the save button:

<div class="form-group">
  <div class="col-md-10"> <input type="submit" class="btn btn-primary" id="savebutton" value="Save"
      onclick="validateForm(); saveCoordinates()" /> @Html.ActionLink("Cancel", "Index", "Application", null, new {
    @class = "btn btn-primary", @id = "cancelbutton" }) </div>
</div>‍‍‍‍‍‍‍‍‍‍