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

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

01.09.2019, 20:27. Показов 943. Ответов 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
Ответ Создать тему
Новые блоги и статьи
http://iceja.net/ сервер решения полиномов
iceja 18.01.2026
Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Первый деплой
lagorue 16.01.2026
Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .
Расчёт переходных процессов в цепи постоянного тока
igorrr37 16.01.2026
/ * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .
Восстановить юзерскрипты Greasemonkey из бэкапа браузера
damix 15.01.2026
Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Изучаю kubernetes
lagorue 13.01.2026
А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11
Jel 10.01.2026
Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru