I am working on MVC application where I have to hide button on button click and show when ajax request completed. But the button is hiding after all request is completed. Below is what I have tried.

```
<input type="button" id="btnCalculateAndSave" value="Calculate & Save" style="float: right" />

```

Below is the jQuery click even which has also ajax function calling on same button click.

```
$("#btnCalculateAndSave").on("click", function (e) {
  $("#btnCalculateAndSave").hide();

  //Several lines for validation

  $.ajax({
    url: '@Url.Action("myControllerFunction", "myController")',
    type: "GET",
    async: false,
    cache: false,
    dataType: "JSON",
    data: { 
      "p1": v1, 
      "p2": v2
    },
    success: function(result) {
    }  
  }
}
});

```

As I have to prevent multiple time button click event. So button is hiding but after all process of ajax is happened even button hide code is in the first line of jQuery click event.