How to set Yandex metrics goals for successful form submission?

Question

JavaScript

Hello!
Submitting the form:

$(".btn").on('click', function (e) {
        e.preventDefault();
        var formThis = $(this).parents('.form');

        if (formThis.is('.user_name')) {
            if (formThis.find('.user_name').val().length <= 3) {
                formThis.find('.user_name').addClass('_notValid');
                setTimeout(function () {
                    formThis.find('.user_name').removeClass('_notValid');
                }, 1500);
                return false
            }
        }

        if (formThis.find('.phone_mask').val().length !== 16) {
            formThis.find('.phone_mask').addClass('_notValid');
            setTimeout(function () {
                formThis.find('.phone_mask').removeClass('_notValid');
            }, 1500);
            return false
        }

        sendAjaxForm(formThis);
    });


    function sendAjaxForm(form) {

        var msg = form.serialize();
        $.ajax({
            type: 'POST',
            url: '/mail.php',
            data: msg,
            success: function (data) {
              $('body').addClass('_fixed');
              $('.overlay').fadeIn(200);
            },
            error: function (xhr, str) {
                alert('Неизвестная ошибка, обратитесь по телефону! Ошибка:', xhr);
            }
        });

    }

Goals:

$( '#calculator-form' ).on('submit_success', function(){   
  ym(54388744, 'reachGoal', 'form-top');
});
  
$( '#form-bottom' ).on('submit_success', function(){   
  ym(54388744, 'reachGoal', 'form-bottom');
});

Goals don't work. How to fix it?

Answer 1

success: function (data) {
  if(typeof(metrika_target) !== 'undefined' && metrika_target.length) {		
    yaCounterНОМЕР.reachGoal(metrika_target);				
         }
}

The metrica_target variable itself is taken from the data attributes of the form you are sending from
In other words, in the body of the Ajax success function, you need to call the goal processing