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

Question

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>

Answer 1

When you use sketch.on('create', function) the function is triggered anytime something new in the sketch is created. If this is a polyline, the 'create' event is triggered each time a new point in the polyline is created. If you look at the esri JavaScript APi they warn about this and provide a code sample that will trigger only when the user accepts their sketch:

// 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 (event.state === "complete") {
      // Do stuff here
   }
}