Несколько форм обратной связи на одной странице

@stalex93 · Регистрация: 05.06.2012

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

Всем привет.
Уже долгое время мучаюсь, никак не могу найти готовое решение, а собственных знаний js столь мало, что они никак не помогают...
Имеется landing-page с одинаковыми формами обратной связи в разных местах страницы (два поля - телефон и имя).
Необходимо, чтобы данные передавались на e-mail, при этом производилась проверка на заполненность полей и в случае успешной передачи информации выводилось сообщение об этом.
Все это без перезагрузки страницы. Одна форма работает, а вот остальные нет. Простым копированием, как я понял, не обойтись.

Форма:

HTML5
1
2
3
4
5
6
7
8
<form id="ajax-contact-form" action="javascript:alert('Отправлено!');">
       
        <INPUT   type="text" id="poly" name="name" placeholder="Имя" value=""><br /><br />
        <INPUT   type="text" id="poly" name="email" placeholder="Телефон" value=""><br /><br />   
         <div id="note"></div>
        <input id="sub" type="image" src="img/but-spec.png"/>
       
        </form>

скрипт:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$(document).ready(function ()
{  
    $("#ajax-contact-form").submit(function ()
    {
         
        var str = $(this).serialize(); 
        $.ajax(
        {
            type: "POST",
            url: "contact.php",
            data: str,
            success: function (msg)
            {
                $("#note").ajaxComplete(function (event, request, settings)
                {
                    if (msg == 'OK') // Если сообщение отправлено, поблагодарим пользователя
                    {
                        result = '<div class="notification_ok">Ваше сообщение отправлено. Спасибо!</div>';
                        $("#fields").hide();
                    }
                    else
                    {
                        result = msg;
                    }
                    $(this).html(result);
                });
            }
        });
        return false;
    });
});

и обработчик:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<?php
 
 
 
if(!empty($_POST))
{
 
$name = htmlspecialchars($_POST['name']);
$email = $_POST['email'];
$message = "Сообшение прислал $name, ответьте на $email";
 
 
$error = array();
 
// Если не введено имя
 
if(empty($name))
{
$error[] = 'Укажите Ваше имя.';
}
 
// Если не введен email
 
if(empty($email))
{
$error[] = 'Укажите Ваш e-mail.';
// проверим корректность email
}
 
 
if(empty($error))
{ // отправляем email средствами php
$mail = 
mail("stalex010@gmail.com", "the subject", $message,
 "From: webmaster\r\n"
."Reply-To: webmaster\r\n"
."X-Mailer: PHP/" . phpversion());
 
if($mail)
{
echo 'Передано сообщение!';
}
 
}
else
{
echo '<div class="notification_error">'.implode('<br />', $error).'</div>';
}
}
 
 ?>

Каким образом вообще можно решить проблему копирования форм на странице?

@sKotenok · 10.09.2013, 20:58

Формы можно просто копировать, только как-то придётся различать, с какой формой в данный момент работаем.
Если нужно различать формы на стороне сервера - добавляем к форме hidden поле:

HTML5
1
2
3
4
5
6
7
8
<form class="simple_form" action="server_side.php" method="post">
  <input type="hidden" name="form_id" value="1"/>
  <!-- Остальные элементы формы -->
</form>
<form class="simple_form" action="server_side.php" method="post">
  <input type="hidden" name="form_id" value="2"/>
  <!-- Остальные элементы формы -->
</form>

Теперь на сервере достаточно проверить $_POST['form_id'].
Различать на стороне клиента ещё проще - задали формам класс и применяем к ним обработчик, а т.к. всё на this навешано, даже менять код особо не придётся ( each() явно вызывать не обязательно - jQuery это внутри всё равно сделает ):

JavaScript
1
$('.simple_form').each().submit( function(e) { /*...*/ });

@stalex93 · 10.09.2013, 21:43 **[ТС]**

sKotenok, можно немного подоступнее для совсем чайника?))

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

Если нужно различать формы на стороне сервера - добавляем к форме hidden поле:

поле добавил. а вот зачем проверка $_POST['form_id']? И что именно за проверка.
Теперь у меня отправленная информация приходит на мыло и из первой, и из второй формы, а вот сообщения "сообщение передано", "заполните поле" отображаются все время под первой формой вне зависимости от того, какую из них заполняю.

@muxahuk1214 · 10.09.2013, 23:17

сообщения об ошибке выводятся потому, что поле куда вставлять задано $('#note') собственно он первый элемент который находит туда и вставляет.
Решить это можно изменив селектор этого #note .. т.е. в вашем случае меняем js:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$(document).ready(function ()
{  
    $("#ajax-contact-form").submit(function ()
    {
        var form = $(this);
        var str = form.serialize(); 
        $.ajax(
        {
            type: "POST",
            url: "contact.php",
            data: str,
            success: function (msg)
            {
                form.find("#note").ajaxComplete(function (event, request, settings)
                {
                    if (msg == 'OK') // Если сообщение отправлено, поблагодарим пользователя
                    {
                        result = '<div class="notification_ok">Ваше сообщение отправлено. Спасибо!</div>';
                        $("#fields").hide();
                    }
                    else
                    {
                        result = msg;
                    }
                    $(this).html(result);
                });
            }
        });
        return false;
    });
});

Далее, если вам нужно что бы 1-а форма делала одно, а другая совершенно другое, то мы в обе формы добавляем скрытый инпут с name="action" (например) где в value="" записываем значение, которое будем проверять в php и в зависимости от этого значения либо посылать писмо либо записывать что-то в базу (например).

Проверяется это простым if .. думаю пояснять не надо..

@sKotenok · 10.09.2013, 23:59

Различать на стороне сервера пригодится хотя бы, чтобы статистику собирать, какой формой чаще народ пользуется (и другую убрать в итоге: 2 формы на одно действие - перебор).
Ещё пара мелких замечаний:
- id должен быть уникальным в пределах страницы, для повторяющихся элементов используйте везде class! (в скрипте от muxahuk1214 нужно будет поменять все "#" на ".")
- action="javascript:alert('Отправлено!'); " - так лучше не делать, пишите в action реальный адрес, а в js просто берите его из элемента - url: form.attr('action') - так форма будет работать и без JS (с перезагрузкой страницы)..

@stalex93 · 11.09.2013, 12:09 **[ТС]**

sKotenok, muxahuk1214, спасибо вам большое, проблема решена

@xxoctt · 05.04.2016, 00:45

Ребята спасибо! Просто добавил две строчки

HTML5
1
2
<input type="hidden" name="form_id" value="1"/>
<input type="hidden" name="form_id" value="2"/>

Добавлено через 41 секунду
и привет с 2016)

Новые блоги и статьи Все статьи Все блоги /
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main(). . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/

@sKotenok 363 / 334 / 38 Регистрация: 29.03.2011 Сообщений: 838
	10.09.2013, 23:59
	Различать на стороне сервера пригодится хотя бы, чтобы статистику собирать, какой формой чаще народ пользуется (и другую убрать в итоге: 2 формы на одно действие - перебор). Ещё пара мелких замечаний: - id должен быть уникальным в пределах страницы, для повторяющихся элементов используйте везде class! (в скрипте от muxahuk1214 нужно будет поменять все "#" на ".") - action="javascript:alert('Отправлено!'); " - так лучше не делать, пишите в action реальный адрес, а в js просто берите его из элемента - url: form.attr('action') - так форма будет работать и без JS (с перезагрузкой страницы).. 1

@stalex93 0 / 0 / 0 Регистрация: 05.06.2012 Сообщений: 6
	11.09.2013, 12:09 [ТС]
	sKotenok, muxahuk1214, спасибо вам большое, проблема решена 0