@Chaly95

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

Не могу понять где ошибка, есть две формы с одной работает 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>
  • Вопрос задан
  • 475 просмотров
Решения вопроса 1
webinar
@webinar Куратор тега PHP
Учим yii: https://youtu.be/-WRMlGHLgRg
1. Открыть консоль, проверить есть ли ошибки
2. Убедится что id формы уникален на странице, возможно просто на другой элемент срабатывает
3. Проверить находит ли js форму по селектору, например в консоль что-то вывести:
$("#contact-form").submit(function(event) {
                        event.preventDefault();
console.log('Да я сработала');
}):
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@RidgeA
Возможно ошибка в консоли
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы