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

@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)

Новые блоги и статьи Все статьи Все блоги /
Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI
Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .

@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