Почему не работает отправка формы AJAX?

Question

[Chaly95]

Не могу понять где ошибка, есть две формы с одной работает AJAX отправка а с другой нет. Хотя сам скрипт одинаковый.

Вот код
Рабочая форма

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

        <div class="form-block-home-security">
            <form id="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" class="answer-security-form"></div>
                <button class="security-form-submit" type="submit" value="Submit" data-dpmaxz-eid="19">Отправить </button>
            </form>
        </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: "/api/contact.php",
                beforeSend: function() {
                    $("#load").fadeIn(400);
                },
                type: "post",
                data: $("#security-form").serialize(),
                success: function(answer) {
                    $("#answer").html(answer);
                }
            }).done(function() {
                $("#load").fadeOut(400);
            });
        });
    });
</script>

Не рабочая форма

<form class="contact-form" name="contact-form" method="post" action="">
                <table>
                    <tr>
                        <td valign="top">
                            <input class="contact-form-input" type="text" name="first_name" maxlength="50" size="30" placeholder="ФИО:">
                        </td>
                    </tr>
                    <tr>
                        <td valign="top">
                            <input class="contact-form-input" type="text" name="email" maxlength="80" size="30" placeholder="E-mail:">
                        </td>
                    </tr>
                    <tr>
                        <td valign="top">
                            <input class="contact-form-input" type="text" name="telephone" maxlength="30" size="30" placeholder="Телефон:">
                        </td>
                    </tr>
                    <tr>
                        <td valign="top">
                            <textarea class="contact-form-input" name="comments" maxlength="1000" cols="25" rows="6" placeholder="Комментарий:"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" style="text-align:center">
                            <div id="answer"></div>
                            <button class="contact-form-submit" type="submit" value="Submit">Отправить <img src="/wp-content/themes/wp-bootstrap-starter/inc/image/Icon-submit.png"></button></a>
                        </td>
                    </tr>
                </table>
            </form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

            <script type="text/JavaScript">
                $(document).ready(function() {
                    $("#contact-form").submit(function(event) {
                        event.preventDefault();
                        $.ajax({
                            url: "/api/contact.php",
                            beforeSend: function() {
                                $("#load").fadeIn(400);
                            },
                            type: "POST",
                            data: $("#contact-form").serialize(),
                            success: function(answer) {
                                $("#answer").html(answer);
                            }
                        }).done(function() {
                            $("#load").fadeOut(400);
                        });
                    });
                });
            </script>

Answer 1

[Максим Тимофеев]

1. Открыть консоль, проверить есть ли ошибки
2. Убедится что id формы уникален на странице, возможно просто на другой элемент срабатывает
3. Проверить находит ли js форму по селектору, например в консоль что-то вывести:

$("#contact-form").submit(function(event) {
                        event.preventDefault();
console.log('Да я сработала');
}):

Comments

[Chaly95]

Я ничего не нахожу в консоли.
Хотя у меня опыта не много)
могу ошибаться.

Залил на хостинг две формы.
fitness.ad-rocket.com.ua/wp-content/themes/wp-boot...

[Максим Тимофеев]

Chaly95, У Вас нет формы с id contact-form (у Вас класс, а это не id) с чего бы ему срабатывать?

[Chaly95]

Максим Тимофеев, Мне даже стыдно стало)
Спасибо большое все работает)

[Максим Тимофеев]

Chaly95, со всеми случается

Answer 2

[RidgeA]

Возможно ошибка в консоли

Comments

[Chaly95]

Я ничего не нахожу в консоли.
Хотя у меня опыта не много)
могу ошибаться.

[frees2]

Ошибок будет много, возможно и от непереработанного запроса в пост получении или даже в версии квайри.

Реально следует послать ie, нафиг он кому нужен и переходить на

https://toster.ru/q/516908