Из за чего может не работать отправка формы AJAX?

Question

[Chaly95]

Добрый день!)
Есть форма с отправкой данных ajax.
На одной странице сайта все работает. а на другой нет(
Может кто то сталкивался с подобным!?)

Вот код рабочий
Страница где расположен код 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>

Вот не рабочий код
Страница где он расположен 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>

Comments

[Дмитрий]

Добрый день.
В первую очередь смотрите ошибки в консоли браузера и логи сервера.
Найдёте там ошибки - пишите.

Answer 1

[Юрий Вельмесов]

Я бегло посмотрел консоль и ответ сервера...

Ну для начала, код конечно ужасть, и то количество ошибок в консоли которое я увидел...
Вы вообще отладкой кода не занимаетесь?

Вот ошибки на странице которая у вас указана - https://pipl.ua/index.php?route=main/main


Но дело даже не в этих ошибках, это так к слову...
На самом деле ajax запрос успешно отправляется на сервер на Ваш обработчик main-form.php, это хорошо видно в отладчике

и даже данные с формы передаются успешно, проблема в том, что Ваш обработчик main-form.php не возвращает ни какой ответ, и соответственно javascript ничего не делает, потому что изначально в логике у Вас нет обработки ответа от сервера.

Для его обработки Вам надо добавить в функции success:

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

и еще не забудьте добавить параметр в ajax, запрос в json формате
вот так:

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

а в обработчике main-form.php написать примерно такой ответ в json формате:

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

echo json_encode($response);
?>

Comments

[Chaly95]

Можно вопрос)
Почему на другой странице обработчик работает?

А вообще большое спасибо за развернутый ответ!)

[Chaly95]

Я тупой, в обработчике была проверка email

[Юрий Вельмесов]

Я рад, что помог Вам! ))