title: How to run JavaScript code on Success of Form submit?
body: <p>I have an Asp.Net MVC web application. I want to run some code on the successful response of the API method which is called on form submit.</p>
  
  <p>I have the below Code.</p>
  
  <pre><code>@using (Html.BeginForm("APIMethod", "Configuration", FormMethod.Post, new { @class = "form-horizontal", id = "formID" }))
  {
  
  }
  
  $('#formID').submit(function (e) {
  $.validator.unobtrusive.parse("form");
  e.preventDefault();
  if ($(this).valid()) {
      FunctionToBeCalled(); //JS function
  }
  }
  </code></pre>
  
  <p>But <code>FunctionToBeCalled()</code> function gets called before the <code>APIMethod()</code>,  but I want to run the <code>FunctionToBeCalled()</code> function after the response of <code>APIMethod()</code>.</p>
  
  <p>So I made the below changes by referring <a href="https://stackoverflow.com/a/22567796/6527049">this</a> link. But now the APIMethod is getting called twice.</p>
  
  <pre><code>$('#formID').submit(function (e) {
  $.validator.unobtrusive.parse("form");
  e.preventDefault();
  if ($(this).valid()) {
  //Some custom javasctipt valiadations
      $.ajax({
          url: $('#formID').attr('action'),
          type: 'POST',
          data: $('#formID').serialize(),
          success: function () {
              console.log('form submitted.');
              FunctionToBeCalled(); //JS function
          }
      });
  
  }
  }
  function FunctionToBeCalled(){alert('hello');}
  </code></pre>
  
  <p>So I am not able to solve the issue.</p>