How to make two forms on one page using AJAX on Bitrix?

Question

1C-Bitrix

Hello everyone - I have 2 forms on one page

<div class="reg-tab__tab js-tab-block is-active" data-tab="1" id="div_1_reg">
  <?
  $APPLICATION->IncludeComponent("bitrix:main.register", "temp1", Array(
      "AUTH" => "N",
      "REQUIRED_FIELDS" => array(
        0 => "PERSONAL_PHONE",
        1 => "NAME",
      ),
      "SET_TITLE" => "Y",
      "SHOW_FIELDS" => array(
        0 => "NAME",
        1 => "PERSONAL_PHONE",
        2 => "EMAIL",
      ),
      "SUCCESS_PAGE" => "/reg/",
      "USER_PROPERTY" => "",
      "USER_PROPERTY_NAME" => "",
      "USE_BACKURL" => "Y",
      "COMPONENT_TEMPLATE" => "temp1",
      "AJAX_MODE" => "Y",
      "AJAX_OPTION_STYLE" => "N",
      "AJAX_OPTION_JUMP" => "N",

    ),
    false
  );?>
</div>

<div class="reg-tab__tab js-tab-block" data-tab="2" id="div_2_reg">
  <?
  $APPLICATION->IncludeComponent(
    "bitrix:main.register", 
    "temp2", 
    array(
      "AUTH" => "N",
      "REQUIRED_FIELDS" => array(
        0 => "PERSONAL_PHONE",
        1 => "NAME",
      ),
      "SET_TITLE" => "Y",
      "SHOW_FIELDS" => array(
        0 => "NAME",
        1 => "EMAIL",
        2 => "PERSONAL_PHONE",
        3 => "WORK_COMPANY",
      ),
      "SUCCESS_PAGE" => "/reg/",
      "USER_PROPERTY" => array(
        0 => "",
        1 => "",
      ),
      "USER_PROPERTY_NAME" => "",
      "USE_BACKURL" => "Y",
      "COMPONENT_TEMPLATE" => "temp2",
      "AJAX_MODE" => "Y",
      "AJAX_OPTION_STYLE" => "N",
      "AJAX_OPTION_JUMP" => "N",

    ),
    false
  );?>
</div>

Accordingly, I enabled them AJAX_MODE = "Y"

And as a result, when submitting the first form with the temp1 template, everything works correctly
. And in the form with the temp2 template, in the form itself, after successful submission, the entire HTML DOM page is loaded.
I can't figure out what the problem is. Forms have different name and id.

Yes, the submit button is the same (name attribute and class) - but I tried to change it (attribute and class) - the problem remained.
When debugging, I found that after submitting the first form, the action attribute of the form is:
/reg/?bxajaxid... well, the parameters.
When sending the second
Get form, the ajax request is not substituted in the action. The action contains my entire /reg/ page without the GET - AJAX request.

How to deal with this, tell me, please.

PS If there is only one form on the page, then everything works correctly.

Answer 1

I can't figure out what's the problem

The problem is that you are using Bitrix))
Essentially.
Bitrix cannot correctly display two identical forms on one page if they work in AJAX mode. Sometimes "glitches" can appear, as in your case.
I submitted this problem to the Bitrix development department back in 2016. Apparently they haven't fixed the problem yet.
According to them, there is no temporary solution to this problem.

Answer 2

You don't have two forms.
You have two calls to the same component.
You need to call the component once and display as many forms as you like!
The Bitrix forum has been chewed for a long time and in several versions, take your time, register as a developer and look in the client section of the forum!