Why might AJAX form submission not work?

Question

JavaScript

Good afternoon!)
There is a form with sending data ajax.
Everything works on one page of the site. but not on the other one (
Maybe someone has come across something like this!?)

Here is the working code
The page where the code is located https://pipl.ua/partnerskaya-programma/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script type="text/JavaScript">
      $(document).ready(function() {
        $("#dealer-form").submit(function(event) {
          event.preventDefault();
          $.ajax({
            url: "catalog/controller/dealer/dealer-form.php",
            beforeSend: function() {
              $("#load").fadeIn(400);
            },
            type: "post",
            data: $("#dealer-form").serialize(),
            success: function(answer) {
              $("#answer").html(answer);
            }
          }).done(function() {
            $("#load").fadeOut(400);
          });
        });
      });
    </script>
     <div class="clean-box">
    <form id="dealer-form" class="dealer-form" name="dealer-form" method="post" action="" data-dpmaxz-eid="14">
        <div class="row">
  <div class="col-md-6 dealer-col-input"><input class="dealer-form-input" type="text" name="first_name" maxlength="50" size="30" placeholder="Название компании" data-dpmaxz-eid="15"></div>
  <div class="col-md-6 dealer-col-input">
  <input class="dealer-form-input" type="text" name="email" maxlength="80" size="30" placeholder="E-mail" data-dpmaxz-eid="16"></div>
 <div class="col-md-6 dealer-col-input">
  <input class="dealer-form-input" type="text" name="telephone" maxlength="30" size="30" placeholder="Номер телефона:" data-dpmaxz-eid="17"></div>
 <div class="col-md-6 dealer-col-input">
  <input class="dealer-form-input" type="text" name="comments" maxlength="1000" size="30" placeholder="Комментарий" data-dpmaxz-eid="18"></div>
<div id="answer"></div>
<div class="col-md-12">
  <button class="dealer-form-submit" type="submit" value="Submit" data-dpmaxz-eid="19">Отправить </button></div></div>
</form>
     
</div>

Here is not working code
Page where it is located https://pipl.ua/index.php?route=main/main

<div class="row">
<div class="col-md-12">
    <div class="div-form-title-security-home">
    <p class="form-title-security-home">Индивидуальное решение</p></div>
<div class="color-block-security-home"><p class="desc-color-blocksecurity-home">Не знаете что выбрать или у Вас остались вопросы?</p> </div>
</div>
<div class="col-md-6 answer-form-security-home">
    <p class="answer-form-security-home">Мы поможем решить Вашу задачу и <br> <b> ответим на все вопросы!</b></p>
    <div class="row">
    <p class="blue-answer-form-security-home">Заполните форму и получите консультацию от нашего специалиста</p>
        <img class="arrow-image-form-security-home" src="https://pipl.ua/catalog/view/theme/oct_techstore/template/main/arrow-form.png">
    </div>
    <img class="image-form-security-home" src="https://pipl.ua/catalog/view/theme/oct_techstore/template/main/form-image.png">

</div>
<div class="col-md-6">

    <div class="form-block-home-security">
        <form id="security-form" class="security-form" name="security-form" method="post" action="" data-dpmaxz-eid="14">
                <input class="security-form-input" type="text" name="first_name" maxlength="50" size="30" placeholder="Ваше имя" data-dpmaxz-eid="15">
                <input class="security-form-input" type="text" name="telephone" maxlength="30" size="30" placeholder="Номер телефона" data-dpmaxz-eid="17">
                <div id="answer"></div>
               <button class="security-form-submit" type="submit" value="Submit" data-dpmaxz-eid="19">Отправить </button>
        </form>
    </div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/JavaScript">
    $(document).ready(function() {
        $("#security-form").submit(function(event) {
            event.preventDefault();
            $.ajax({
                url: "catalog/controller/main/main-form.php",
                beforeSend: function() {
                    $("#load").fadeIn(400);
                },
                type: "post",
                data: $("#security-form").serialize(),
                success: function(answer) {
                    $("#answer").html(answer);
                }
            }).done(function() {
                $("#load").fadeOut(400);
            });
        });
    });
</script>

Answer 1

I briefly looked at the console and the server's response...
Well, for starters, the code is certainly terrible, and the number of errors in the console that I saw...
You don't debug the code at all?
But it's not even about these errors, it's so by the way ...
In fact, the ajax request is successfully sent to the server on your main-form.php handler , this is clearly visible in the debugger
and even the data from the form is transmitted successfully, the problem is that your main-form.php handler does not return any response, and accordingly javascript does nothing, because initially in logic you don't have to process the response from the server.
To process it, you need to add to the success function:

success: function(data) {
    if (data.status == 'success') {
        // какой то код или сообщение, к примеру
        alert(data.message);
    }
    else {
        alert(data.message);
    }
}

and don't forget to add parameter to ajax, request in json format
like this:

$.ajax({
    dataType: 'json',
    url: "catalog/controller/main/main-form.php",
    .............

and in the main-form.php handler, write something like this response in json format:

<?php
if (isset($_POST['test'])) {
    $response = [
        'status' => 'success',
        'message' => 'Успешный ответ',
        'result' => 'Ваш какой то результат от скрипта'
    ];
} else {
    $response = [
        'status' => 'error',
        'message' => 'Возникла ошибка'
    ];
}

echo json_encode($response);
?>