Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
0 / 0 / 0
Регистрация: 01.09.2019
Сообщений: 2

Как при отправке формы из модалки дописывать в data нужные данные из первой формы и отправлять?

01.09.2019, 20:27. Показов 968. Ответов 1

Студворк — интернет-сервис помощи студентам
Добрый вечер, всем!
Есть две формы... в одну вводим вопрос от пользователя, во второй пользователь оставляет свои контакты и выполняет отправку формы.
HTML5
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
<form class="director-form">
                    <input type="text" name="user_quest" placeholder="Введите свой вопрос" required="">
                    <button class="button director-btn consultation-btn" name="submit" type="submit">Получить
                        консультацию
                    </button>
                </form>
 
<div class="popup-consultation popup">
    <div class="popup-dialog">
        <div class="popup-content">
            <!-- <div class="popup-form"> -->
            <form class="capture-form text-center">
                <span class="circle"><button class="popup-close">×</button></span>
                <label for="name_13">Как к вам обращаться</label>
                <input type="text" id="name_13" name="user_name" placeholder="Ваше имя" required="">
                <label for="phone_13">Ваш телефон для получения скидки</label>
                <input class="phone-user" type="text" id="phone_13" name="user_phone" placeholder="+7(___)___-__-__" required="">
                <button class="button capture-form-btn" name="submit" type="submit">Получить консультацию</button>
                <p class="small">Вы получите расчет стоимости с учетом выбора <br>подходящего объема септика. типа
                    грунта, <br> расположения объектов на участке, уровня грунтовых <br> вод, типа фундамента дома и еще
                    7 параметров</p>
            </form>
            <!-- </div> -->
        </div>
    </div>
</div>
CSS
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
.popup {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    background-color: rgba(0,0,0,.5);
}
.popup-content {
    text-align: center;
}
.popup-content {
    position: fixed;
    left: 50%;
    top: 20%;
    background-color: #fff;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
.popup .capture-form {
    display: block;
    padding-top: 4rem;
    padding-bottom: 3rem;
    width: 39rem;
}
.popup .capture-form label {
    font-family: 'MuseoSansCyrl_bold',sans-serif;
}
label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}
.popup .capture-form input {
    text-align: center;
    width: 27rem;
    height: 6rem;
    margin-top: 1.4rem;
    margin-bottom: 2rem;
    border-radius: 5px;
    border-width: 1px;
    border-color: #ddd;
    border-style: solid;
    background-color: #fff;
}
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
const popup = () => {
 
        const popups = (buttonsSelector, dialogSelector) => {
 
            const buttons = document.querySelectorAll(buttonsSelector),
                dialog = document.querySelector(dialogSelector);
 
            buttons.forEach(n => n.addEventListener('click', (event) => {
                event.preventDefault();
                dialog.style.display = 'block';
            }));
 
            dialog.addEventListener('click', ({
                target
            }) => {
                if (target.classList.contains('popup-close')) {
                    event.preventDefault();
                    dialog.style.display = 'none';
                } else {
                    target = target.closest('.popup-content');
                    if (!target) {
                        dialog.style.display = 'none';
                    }
                }
            });
            
        };
 
  popups('.director .director-btn', '.popup-consultation');
 
};
 
popup();
 
const sendForm = () => {
 
        const errorMessage = 'Ошибка...',
            loadMessage = 'Идет отправка...',
            successMessage = 'Отправлено!';
 
        const statusMessage = document.createElement('div');
        statusMessage.style.cssText = 'font-size: 2rem; color: #000;';
 
        const allForm = document.querySelectorAll('form'),
            allInput = document.querySelectorAll('input');
 
        allForm.forEach((elem) => {
 
            elem.addEventListener('submit', (event) => {
 
                event.preventDefault();
                elem.appendChild(statusMessage);
                statusMessage.textContent = loadMessage;
 
                const formData = new FormData(elem);
                let body = {};
 
                formData.forEach((val, key) => {
                    body[key] = val;
                });
 
                postData(body)
                    .then((response) => {
                        if (response.status !== 200) {
                            throw new Error('status network is not 200');
                        }
                        statusMessage.textContent = successMessage;
                    })
                    .then(allInput.forEach((item) => item.value = ''))
                    .catch((error) => {
                        statusMessage.textContent = errorMessage;
                        console.error(error);
                    });
 
            });
 
            elem.addEventListener('input', (elem) => {
 
                if (elem.target.name === 'user_phone') {
                    elem.srcElement.value = elem.srcElement.value.replace(/[^+0-9]/gi, ``);
                } else {
                    return;
                }
 
            });
 
        });
 
        const postData = (body) => {
 
            return fetch('./server.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(body)
            });
 
        };
 
    };
 
    sendForm();
https://codepen.io/AlexanderSemenov/pen/oNvedOR

Как при отправке формы из модального окна дописывать в data нужные данные из первой формы и отправлять на сервер?
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
01.09.2019, 20:27
Ответы с готовыми решениями:

Как при отправке формы добавить текущего пользователя сессии в таблицу данных формы
вывод логина юзера, может поможет &lt;?php &lt;?php // Проверяем, пусты ли переменные логина и id пользователя if...

Как отправлять данные формы в разные скрипты
Имеется форма: &lt;form method=&quot;POST&quot; action=&quot;form1.php&quot;&gt; &lt;input name=&quot;form&quot; value=&quot;form&quot; /&gt; .....(другие данные формы)..... &lt;input...

Как отправлять данные формы в разные скрипты
Имеется форма: &lt;form method=&quot;POST&quot; action=&quot;form1.php&quot;&gt; &lt;input name=&quot;form&quot; value=&quot;form&quot; /&gt; .....(другие данные формы)..... &lt;input...

1
 Аватар для atanov
640 / 481 / 172
Регистрация: 26.05.2016
Сообщений: 2,674
03.09.2019, 08:05
Alexander_VS, откуда ж Вы код этот взяли? У Вас всего три(!) поля, а такая жуткая конструкция навёрнута. Хотя этот код рабочий, но его надо уметь под Ваши задачи прикрутить, а с этим судя по всему проблемы. Для начала - у Вас формы вообще можно убрать, т.к. используете ajax и вынужденно лишние preventDefault() использовать. Далее при клике на кнопку "Отправить", собираете данные из инпутов (в коде это с 55 по 60 стр. собирается в массив body) в массив или просто строкой отправляете на сервер. Хотите fetch использовать, можете оставить, считается, что это более современный метод.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
03.09.2019, 08:05
Помогаю со студенческими работами здесь

Как отправлять данные одной формы по двум разным адресам?
суть такая есть форма: &lt;form action=&quot;index.php&quot; method=&quot;post&quot;&gt; &lt;input type=&quot;text&quot; name=&quot;name&quot;&gt; &lt;input type=&quot;submit&quot;...

При отправке формы в выводе $_POST в массиве я вижу не все поля формы
подскажите, в чем дело. или для обработки полей типа &quot;file&quot; (которого нет в массиве) нужны особые настройки на сервере?

Передать данные из DataGridView первой формы в comboBox второй формы
Всем привет! У меня возник один очень странный вопрос, прошу строго не судить) Как передать данные по выбору строки DataGridView из...

Нужно сделать, чтобы при открытии главной формы открывалась еще одна (форма 2) сразу при появлении первой формы
я попробывал в евентс поставить онкреэйт форм 2 .шов ,программа запускается но появляется ошибка , как рализовать? есть какой нибудь...

При загрузки формы данные из первой таблицы вывести в DataGridView
Народ, помогите увидеть ошибку! у меня две таблицы Автопарк и Состав_поставки нужно чтобы при загрузки формы данные из первой таблицы...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
Идея фильтра интернета (сервер = слой+фильтр).
Hrethgir 31.03.2026
Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .
Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда
anaschu 31.03.2026
В прикрепленном документе раздумья о том, как можно поменять модель в будущем
10 пpимет, которые всегда сбываются
Maks 31.03.2026
1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .
Перемещение выделенных строк ТЧ из одного документа в другой
Maks 31.03.2026
Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .
Functional First Web Framework Suave
DevAlt 30.03.2026
Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .
Автоматическое создание документа при проведении другого документа
Maks 29.03.2026
Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .
Настройка движения справочника по регистру сведений
Maks 29.03.2026
Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .
Автозаполнение реквизита при выборе элемента справочника
Maks 27.03.2026
Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru