How to set up Yandex goal in Ajax form?

Question

PHP

Hello. I have a regular feedback form on Bitrix. I want to set Yandex a goal after a hasty form submission. The form is passed by ajax
template.

<?if(strlen($arResult["OK_MESSAGE"]) > 0){?>
  <div class="mf-ok-text"><?=$arResult["OK_MESSAGE"]?></div>
<?}else{?>
<form action="<?=POST_FORM_ACTION_URI?>" method="POST">
<?=bitrix_sessid_post()?>
  <fieldset>
    <div><span><?=$arResult["ERROR_MESSAGE"]["ERR_NAME"]?></span></div>
    <label for="popup-online-name">Имя:<span>*</span></label>
    <input type="text" name="user_name" id="popup-online-name" value="<?=$arResult['AUTHOR_NAME']?>"/>
  </fieldset>
  <fieldset>
    <div><span><?=$arResult["ERROR_MESSAGE"]["ERR_COMPANY"]?></span></div>
    <label for="popup-online-usluga">Компания:</label>
    <input type="text" name="company" id="popup-online-company" value="<?=$arResult['COMPANY']?>"/>
  </fieldset>
  
  <input type="hidden" name="PARAMS_HASH" value="<?=$arResult["PARAMS_HASH"]?>">
  <input id="SUBMIT_ORDER" type="button" name="submit" value="Отправить">
</form>
<?}?>

Ajax:

$('.order').click(function(){
    $.ajax({
      type: "POST",
      url: "/ajax/ajax_product.php",
      beforeSend: function () {
        $('.o-content').empty();
      },
      success: function (data) {				
          $('.o-content').append(data);
          $('#SUBMIT_ORDER').click(sendSubmit);
          	$('.popup-online').fadeIn(300);
          $('.modalWindow').fadeIn();
      }
    });
    });

It is onsubmit that is needed.
I did this:
1.

<form action="<?=POST_FORM_ACTION_URI?>" method="POST" onsubmit="yaCounterXXXXX.reachGoal('Order'); return true;">

doesn't work
2.

<input id="SUBMIT_ORDER" type="button" name="submit" value="Отправить" onsubmit="yaCounterXXXXX.reachGoal('Order'); return true;">

doesn't work
3.

$('.order').click(function(){
    $.ajax({
      type: "POST",
      url: "/ajax/ajax_product.php",
      beforeSend: function () {
        $('.o-content').empty();
      },
      success: function (data) {				
          $('.o-content').append(data);
          $('#SUBMIT_ORDER').click(sendSubmit);
                                        yaCounterXXXXX.reachGoal('Order'); return true;
          	$('.popup-online').fadeIn(300);
          $('.modalWindow').fadeIn();
      }
    });
    });

- works only on click
4. In the first lines I wrote

<?if(strlen($arResult["OK_MESSAGE"]) > 0){?>
  <div class="mf-ok-text"><?=$arResult["OK_MESSAGE"]?></div>
<script>
yaCounterXXXXX.reachGoal('Order'); return true;
</script>
<?}else{?> ..........

- does not work.
Help me please.

Answer 1

$('body').on('submit', 'ваша форма',  function(){
yaCounterXXXXX.reachGoal('Order'); 
})

Answer 2

And why do you send the form to the success event after the Ajax call?

success: function (data) {				
          $('.o-content').append(data);
          $('#SUBMIT_ORDER').click(sendSubmit);
          ...
}