Why is click fired instead of submit?

Question

JavaScript

Standard feedback form of one Bitrix template

<h2><?=GetMessage("MFT_ORDER")?></h2>
<?if(!empty($arResult["ERROR_MESSAGE"]))
{
  foreach($arResult["ERROR_MESSAGE"] as $v)
    ShowError($v);
}
if(strlen($arResult["OK_MESSAGE"]) > 0)
{
  ?><div class="mf-ok-text"><?=$arResult["OK_MESSAGE"]?></div><?
}
?>
<p class="note"><span><?=GetMessage("MFT_REQUIRED")?></span></p>
<form action="<?=POST_FORM_ACTION_URI?>#feedback" method="POST" class="form-main">
<?=bitrix_sessid_post()?>
  <div class="form-left">
  <fieldset>
    <label for="popup-order-name">
      <?=GetMessage("MFT_NAME")?><?if(empty($arParams["REQUIRED_FIELDS"]) || in_array("NAME", $arParams["REQUIRED_FIELDS"])):?><span class="mf-req">*</span><?endif?>
    </label>
    <input type="text" name="user_name" value="<?=$arResult["AUTHOR_NAME"]?>" id="popup-order-name" />
  </fieldset>
  
  <fieldset>
    <label for="popup-order-email">
      <?=GetMessage("MFT_EMAIL")?><?if(empty($arParams["REQUIRED_FIELDS"]) || in_array("EMAIL", $arParams["REQUIRED_FIELDS"])):?><span class="mf-req">*</span><?endif?>
    </label>
    <input id="popup-order-email" type="text" name="user_email" value="<?=$arResult["AUTHOR_EMAIL"]?>">
  </fieldset>
  
  <fieldset>
    <label for="popup-order-phone">
      <?=GetMessage("MFT_PHONE")?><?if(empty($arParams["REQUIRED_FIELDS"]) || in_array("PHONE", $arParams["REQUIRED_FIELDS"])):?><span class="mf-req">*</span><?endif?>
    </label>
    <input id="popup-order-phone" type="text" name="user_phone" value="<?=$arResult["AUTHOR_PHONE"]?>">
  </fieldset>
</div>
<div class="form-right">
  <fieldset>
    <label for="popup-order-msg">
      <?=GetMessage("MFT_MESSAGE")?><?if(empty($arParams["REQUIRED_FIELDS"]) || in_array("MESSAGE", $arParams["REQUIRED_FIELDS"])):?><span class="mf-req">*</span><?endif?>
    </label>
    <textarea name="MESSAGE" id="popup-order-msg"><?=$arResult["MESSAGE"]?></textarea>
  </fieldset>
</div>
<div class="clearfix"></div>
  <div class="text-center">
    <button type="submit" name="submit_contact" value="<?=GetMessage("MFT_SUBMIT")?>" class="btn btn-big"><span><?=GetMessage("MFT_SUBMIT")?></span></button>
  </div>
</div>
<script>
$( "form" ).submit(function( ) {
  yaCounterXXXXXXXXX.reachGoal('CALL'); return true;
});
</script>
</form>

As you can see, at the very bottom is the JQ handler for the Yandex metric. Problem: It fires not only after a successful form submission, but simply on any click
on my button. Although the event is not onclick but submit. Why?

PS why jq and not

<form ......................... onsubmit=..............>

because then the counter also spins not a successful form submission, but a click on the button.

Answer 1

The button inside the form is for sending data to the server. Always generates a submit event on click