Как отправить форму с отправкой события вместо сообщения AJAX?

Question

Я использую Яндекс.Метрику для отслеживания действий пользователей на моем сайте (как это делает Google Analytics). У него есть возможность отслеживать, как пользователь работает с HTML-формами - что он / она вводит там, сколько времени тратит на каждое поле и т. Д. ( Ссылка на русском языке). Но для правильной работы необходимо отправить форму с submit событие.

У меня есть следующий код:

<form class="form-horizontal" role="form" id="utsDetails">
...
<button type="button" id="calc" name="calc">Calculate</button>
</form>

<script type="text/javascript">
   $("#calc").click(function() {
      $.ajax({
        type: 'POST',
        dataType: 'json',
        data: {
           // all utsDetails form fields are there
        },          
        beforeSend: function(){
           // ...
        }
      })
      .done(function(data, textStatus, jqXHR) {
          // ...
      });

Есть ли способ изменить мой код, чтобы сохранить функциональность неизменной (то есть страница не должна быть перезагружена при нажатии кнопки, результат должен быть получен как JSON, beforeSend а также done функции должны быть выполнены и т. д.), но для отправки данных формы с submit?

Answer 1

Следующие изменения помогли мне:

<form class="form-horizontal" role="form" id="utsDetails" method="POST" action="/"> <!-- added method and action -->
...
<button type="submit" id="calc" name="calc">Calculate</button> <!-- replaced  type with "submit" -->
</form>

<script type="text/javascript">
   $("#utsDetails").submit(function() { // instead of $("#calc").click(function() {
      $.ajax({
        type: 'POST',
        dataType: 'json',
        data: {
           // all utsDetails form fields are there
        },          
        beforeSend: function(){
           // ...
        }
      })
      .done(function(data, textStatus, jqXHR) {
          // ...
      });
      return true; // to avoid page reload