Изменить скрипт ajax отправки формы

@devland · Регистрация: 10.01.2015

Студворк — интернет-сервис помощи студентам

Здравствуйте.

Сразу к проблеме:

есть веб страница, на которой 3 формы отправки контактов (со своими обработчиками) и много ссылок на одну всплывающую форму с аяксом.

Скрипт, определяющий, что надо запустить именно аяксовую отправку выглядит так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(document).ready(function () {
    $("form").submit(function () {
        // Получение ID формы
        var formID = $(this).attr('id');
        // Добавление решётки к имени ID
        var formNm = $('#' + formID);
        $.ajax({
            type: "POST",
            url: 'mail.php',
            data: formNm.serialize(),
            success: function (data) {
                // Вывод текста результата отправки
                $(formNm).html(data); 
            },
            error: function (jqXHR, text, error) {
                // Вывод текста ошибки отправки
                $(formNm).html(error);         
            }
        });
        return false;
    });
});

Он ищет на странице тег form, определяет его id и отправляет в php обработчик mail.php

ПРОБЛЕМА: данный скрипт перехватывает отправку ВСЕХ форм на странице, а нужно, чтобы формы с ID = form1, form2 и form3 отправлялись через свои обработчики.

Совсем не силен в программировании, в js в частности, но ПРОБОВАЛ ТАК:

ВАРИАНТ 1:

JavaScript
1
2
3
4
5
6
7
8
9
10
$(document).ready(function () {
    $("form").submit(function () {
        // Получение ID формы
        var formID = $(this).attr('id');
        // Добавление решётки к имени ID
        if (formID != 'form1') and (formID != 'form2') and (formID != 'form3') {
        var formNm = $('#' + formID);
        }
        $.ajax({
        ...

ВАРИАНТ 2:

JavaScript
1
2
3
4
5
6
7
8
9
10
$(document).ready(function () {
    $("form").submit(function () {
        // Получение ID формы
        var formIDfirst = $(this).attr('id');
        if (formIDfirst != 'form1') and (formIDfirst != 'form2') and (formIDfirst != 'form3') {
        var formID = $(this).attr('id');
        // Добавление решётки к имени ID
        var formNm = $('#' + formID);
        $.ajax({
        ...

Эти варианты не работают, гугл мне мало чем помог, надеюсь на вас.

Страница просто перезагружается при попытке отправки аяксовой формы (те 3 формы работают норм).

Хромовский отладчик говорит следующее:

Uncaught SyntaxError: Unexpected identifier на строку с моими условиями.

@kalabuni · 26.04.2016, 21:06

то, что вы здесь понаписали, рассматривается в разделе JQuery -- попросите модераторов перенести вашу тему туда* -- там вам быстрее помогут

*нажмите на треугольничек с восклицательным знаком и напишите вашу просьбу о переносе

@ntlinuxnt · 26.04.2016, 22:25

условие надо обернуть в скобки

JavaScript
1
if ((formIDfirst != 'form1') and (formIDfirst != 'form2') and (formIDfirst != 'form3'))

@devland · 27.04.2016, 09:15 **[ТС]**

Сообщение от ntlinuxnt

условие надо обернуть в скобки

JavaScript
1
if ((formIDfirst != 'form1') and (formIDfirst != 'form2') and (formIDfirst != 'form3'))

спасибо за ответ, но результат тот же - аяксовая форма не отправляет форму совсем, отладчик ругается на строку с условием: Uncaught SyntaxError: Unexpected identifier

@ntlinuxnt · 27.04.2016, 09:51

Вы можете весь исправленный код опубликовать на http://jsfiddle.net/ ?

@devland · 27.04.2016, 10:23 **[ТС]**

Не уверен, что все правильно выложил на jsfiddle, вот ссылка https://jsfiddle.net/h4pmuc97/1/

@ntlinuxnt · 27.04.2016, 15:49

https://jsfiddle.net/h4pmuc97/5/
Попробуйте так.

@devland · 27.04.2016, 16:27 **[ТС]**

Аяксовые формы работают, но те 3 отдельные формы совсем перестали реагировать на кнопку отправки

@ntlinuxnt · 27.04.2016, 20:44

Так может вам проще прописать class для тех форм которые должны обрабатываться в jquery и через него дергать?

@devland · 29.04.2016, 19:18 **[ТС]**

Спасибо за совет, ntlinuxnt. Но с моими знаниями не получилось - присвоил форме класс ajaxsend и исправил скрипт так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(document).ready(function () {
    $("form").submit(function () {
        // Получение ID формы
        var formID = $(this).attr('class');
        // Добавление решётки к имени ID
        var formNm = $('.' + formID);
        $.ajax({
            type: "POST",
            url: 'mail.php',
            data: formNm.serialize(),
            success: function (data) {
                // Вывод текста результата отправки
                $(formNm).html(data); 
            },
            error: function (jqXHR, text, error) {
                // Вывод текста ошибки отправки
                $(formNm).html(error);         
            }
        });
        return false;
    });
});

Форма заработала, но другие перестали работать((

/*--------------------------------------------------------------*/

Решил переделать - форма аяксовая только одна, просто вызывается во многих местах:

сама форма:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="remodal" data-remodal-id="modal" role="dialog" aria-labelledby="modal1Title" aria-describedby="modal1Desc">
 <div class="remodalBorder">
  <p><img src="https://www.cyberforum.ru/images/sendico.png"></p>
  <button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>
      <form id="form" class="ajaxsend">
        <h2 id="modal1Title">Оставьте ваши контактные данные и наш специалист свяжется с вами</h2>
        <input type="text" class="putName" name="name" placeholder="Имя" required>
        <input name="phone" type="tel" class="putPhone" placeholder="Номер телефона" required>
        <input type="submit" name="submit" class="btn" value="ОТПРАВИТЬ">
        <input type="hidden" name="formData" value="Заявка с сайта">
        <p style="margin:0; color: #c7d9e7; font-size: 12px;">Ваши данные строго конфиденциальны и не будут переданы третьим лицам</p>
    </form>
</div>
</div>

Переделал скрипт, чтобы срабатывал только на id="form":

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function () {
    $("#form").submit(function () {
        $.ajax({
            type: "POST",
            url: 'mail.php',
            data: $('formNm').serialize(),
            success: function (data) {
                // Вывод текста результата отправки
                $(formNm).html(data); 
            },
            error: function (jqXHR, text, error) {
                // Вывод текста ошибки отправки
                $(formNm).html(error);         
            }
        });
        return false;
    });
});

Вроде по логике скрипт должен срабатывать при сабмите формы с id="form", но:

1. форма отправляется пустая - письмо приходит
2. аяксовой перезагрузки формы не происходит - тупо не реагирует

/*--------------------------------------------------------------*/

Менял одну строку

JavaScript
1
            data: $('formNm').serialize(),

на:

JavaScript
1
            data: $('#form').serialize(),

Письма приходят, но форма не перезагружается. Не понимаю значения formNm

Вот тут и застрял - что не так??

/*--------------------------------------------------------------*/

ИТОГОВЫЙ СКРИПТ СЕЙЧАС ВЫГЛЯДИТ ТАК (все формы работают, но аяксовая перезагрузка не робит):

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function () {
    $("#form").submit(function () {
        $.ajax({
            type: "POST",
            url: 'mail.php',
            data: $('#form').serialize(),
            success: function (data) {
                // Вывод текста результата отправки
                $(formNm).html(data); 
            },
            error: function (jqXHR, text, error) {
                // Вывод текста ошибки отправки
                $(formNm).html(error);         
            }
        });
        return false;
    });
});

@devland · 03.05.2016, 12:07 **[ТС]**

Народ, кто разбирается в ajax, помогите пожалуйста. Формы все отправляются, но аяксовая не перезагружается и не показывает пользователю, что форма отправлена.

@ntlinuxnt · 07.05.2016, 02:24

имя другое не пробовали? И вообще подебажить что происходит, например firebug"ом. Поставить точки останова и посмотреть.

@fanatikus · 07.05.2016, 18:43

Сообщение от devland

но аяксовая перезагрузка не робит

1. что значит аяксовая перезагрузка?
2.

Сообщение от devland

$(formNm).html(data);

formNm - откуда берется

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	26.04.2016, 21:06
	то, что вы здесь понаписали, рассматривается в разделе JQuery -- попросите модераторов перенести вашу тему туда* -- там вам быстрее помогут *нажмите на треугольничек с восклицательным знаком и напишите вашу просьбу о переносе 0

@ntlinuxnt $ su 1605 / 520 / 97 Регистрация: 18.11.2010 Сообщений: 2,807 Записей в блоге: 2
	27.04.2016, 09:51
	Вы можете весь исправленный код опубликовать на http://jsfiddle.net/ ? 0

@devland 2 / 2 / 4 Регистрация: 10.01.2015 Сообщений: 30
	27.04.2016, 10:23 [ТС]
	Не уверен, что все правильно выложил на jsfiddle, вот ссылка https://jsfiddle.net/h4pmuc97/1/ 0

@ntlinuxnt $ su 1605 / 520 / 97 Регистрация: 18.11.2010 Сообщений: 2,807 Записей в блоге: 2
	27.04.2016, 15:49
	https://jsfiddle.net/h4pmuc97/5/ Попробуйте так. 0

@devland 2 / 2 / 4 Регистрация: 10.01.2015 Сообщений: 30
	27.04.2016, 16:27 [ТС]
	Аяксовые формы работают, но те 3 отдельные формы совсем перестали реагировать на кнопку отправки 0

@ntlinuxnt $ su 1605 / 520 / 97 Регистрация: 18.11.2010 Сообщений: 2,807 Записей в блоге: 2
	27.04.2016, 20:44
	Так может вам проще прописать class для тех форм которые должны обрабатываться в jquery и через него дергать? 0

@devland 2 / 2 / 4 Регистрация: 10.01.2015 Сообщений: 30
	03.05.2016, 12:07 [ТС]
	Народ, кто разбирается в ajax, помогите пожалуйста. Формы все отправляются, но аяксовая не перезагружается и не показывает пользователю, что форма отправлена. 0

@ntlinuxnt $ su 1605 / 520 / 97 Регистрация: 18.11.2010 Сообщений: 2,807 Записей в блоге: 2
	07.05.2016, 02:24
	имя другое не пробовали? И вообще подебажить что происходит, например firebug"ом. Поставить точки останова и посмотреть. 0