Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.77/13: Рейтинг темы: голосов - 13, средняя оценка - 4.77
0 / 0 / 0
Регистрация: 22.06.2016
Сообщений: 54

Отправка нескольких форм

18.07.2018, 15:50. Показов 2782. Ответов 14
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здравствуйте!
На странице есть несколько форм для внесения в БД.
Подскажите, пожалуйста, как можно одним кликом отправить их на обработку файлом php?
Заранее спасибо!
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
18.07.2018, 15:50
Ответы с готовыми решениями:

Как брать select из нескольких форм
Пожалуйста помогите решить задачку. Не получается правильно реализовать передачу select через JS. Проблема в том что на странице...

Отправка данных N-го кол. форм
Добрый день. Пожалуйста помогите. Стал делать с помощью javascript отправку данных форм. Форм несколько, эти формы выводятся в цикле...

Заполнение нескольких форм используя данные из таблицы mysql
Есть форма, в ней несколько полей для ввода, куда можно вручную вводить данные. Также должна быть кнопка по которой вызывается таблица...

14
Эксперт JS
2037 / 1096 / 409
Регистрация: 29.04.2016
Сообщений: 2,625
18.07.2018, 16:01
Цитата Сообщение от Kadad Посмотреть сообщение
На странице есть несколько форм
А код этих самых форм?
0
0 / 0 / 0
Регистрация: 22.06.2016
Сообщений: 54
18.07.2018, 16:13  [ТС]
Формы самые обычные:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form>
<input type="text" name="name">
<input type="text" name="phone">
<input type="submit" name="submit" value="ОТПРАВИТЬ">
<input type="hidden" value="id1">
</form>
 
<form>
<input type="text" name="name">
<input type="text" name="phone">
<input type="submit" name="submit" value="ОТПРАВИТЬ">
<input type="hidden" value="id2">
</form>
 
<a href="#" onclick="">Отправить все формы</a>
0
Эксперт JS
2037 / 1096 / 409
Регистрация: 29.04.2016
Сообщений: 2,625
18.07.2018, 16:24
Kadad,
отправить ajax-ом или просто отправить и каким методом? POST или GET?
0
0 / 0 / 0
Регистрация: 22.06.2016
Сообщений: 54
18.07.2018, 16:28  [ТС]
Цитата Сообщение от zlojnaxa Посмотреть сообщение
Kadad,
отправить ajax-ом или просто отправить и каким методом? POST или GET?
Ajax-ом, но уже перепробовал кучу вариантов, никак не могу найти рабочий. Метод POST
0
Эксперт JS
2037 / 1096 / 409
Регистрация: 29.04.2016
Сообщений: 2,625
18.07.2018, 16:57
Kadad,
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form>
    <input class="sendThis" type="text" name="name" value="11111">
    <input class="sendThis" type="text" name="phone" value="22222">
    <input class="sendThis" type="hidden" value="id1">
</form>
 
<form>
    <input class="sendThis" type="text" name="name" value="33333">
    <input class="sendThis" type="text" name="phone" value="44444">
    <input class="sendThis" type="hidden" value="id2">
</form>
 
<button id="send">Запрос</button>
<div id="result">Ответ</div>
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
document.getElementById('send').addEventListener('click', async function(){
    var data,someSelector=document.getElementsByClassName('sendThis');
    data = 'something='+[...someSelector].map((e,i)=>
        someSelector[i].value
    );
    var output = await main('handler.php',data);                        // адрес, данные
    document.getElementById('result').innerHTML = JSON.parse(output);   // если нужно вывести на странице
}, false);
 
const postRequest=(uri,type,data,responseType='')=>new Promise((resolve,reject)=>{
    let xhr=new XMLHttpRequest();
    xhr.open('POST',uri,true);
    xhr.responseType=responseType;
    xhr.setRequestHeader('Content-Type',type);
    xhr.onreadystatechange=()=>{
        if(xhr.readyState===4){
            if(xhr.status===200) resolve(xhr.response);
            else reject(xhr.status+' '+xhr.statusText);
        }
    }
    xhr.onerror=error=>reject(error);
    xhr.send(data);
});
async function main(uri,value){
    let result=await postRequest(uri,'application/x-www-form-urlencoded',value);
    return result;
}
ну и на всякий случай handler.php:
PHP
1
echo json_encode($_POST['something']);
1
21 / 44 / 11
Регистрация: 08.02.2018
Сообщений: 443
18.07.2018, 21:37
Цитата Сообщение от zlojnaxa Посмотреть сообщение
echo json_encode($_POST['something']);
желательно так
PHP
1
echo json_encode($_POST['something'],JSON_UNESCAPED_UNICODE);
1
Эксперт JS
2037 / 1096 / 409
Регистрация: 29.04.2016
Сообщений: 2,625
18.07.2018, 21:41
Цитата Сообщение от maxoun Посмотреть сообщение
желательно так
да пофиг
тот вариант что я привел выше все равно гавнокод- рабочий правда... но все же надо переделать...
кстати что дает этот хвост JSON_UNESCAPED_UNICODE ?
0
21 / 44 / 11
Регистрация: 08.02.2018
Сообщений: 443
18.07.2018, 21:48
Цитата Сообщение от zlojnaxa Посмотреть сообщение
кстати что дает этот хвост JSON_UNESCAPED_UNICODE
JSON по умолчанию кириллицу кодирует как \uXXXX, константа JSON_UNESCAPED_UNICODE отменяет это кодирование.
0
Эксперт JS
2037 / 1096 / 409
Регистрация: 29.04.2016
Сообщений: 2,625
18.07.2018, 21:50
Цитата Сообщение от maxoun Посмотреть сообщение
JSON по умолчанию кириллицу кодирует
аа понял, я обычно это обхожу так:
PHP
1
header('Content-Type: text/html; charset=utf-8');
По крайней мере у меня все норм с кирилицой таким образом...
0
21 / 44 / 11
Регистрация: 08.02.2018
Сообщений: 443
18.07.2018, 22:00
Цитата Сообщение от zlojnaxa Посмотреть сообщение
header('Content-Type: text/html; charset=utf-8');
Даже если их нету, то на стороне JS , благодоря JSON.parse это решается очень легко.
Это всего лишь тонкости языка.
0
0 / 0 / 0
Регистрация: 22.06.2016
Сообщений: 54
18.07.2018, 22:25  [ТС]
Спасибо большое! Буду пробовать!
0
Эксперт JS
2037 / 1096 / 409
Регистрация: 29.04.2016
Сообщений: 2,625
18.07.2018, 22:51
Kadad,
Попробуй лучше так, покороче да и тебе будет понятней:
HTML5
1
2
3
4
5
6
7
8
9
10
<form class="form">
    <input type="text" name="name" value="11111">
    <input type="text" name="phone" value="22222"><br><br><br>
</form>
<form class="form">
    <input type="text" name="name" value="33333">
    <input type="text" name="phone" value="44444"><br><br><br>
</form>
<button class="button">Отправить все формы</button>
<div id="result"></div>
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
var form = document.getElementsByClassName('form');
var button = document.getElementsByClassName('button')[0];
 
button.addEventListener('click', function(){
    ajaxRequest('handler.php');    // тут адрес для отправки данных
});
 
function ajaxRequest(url){
    var formData, formArray = [], request;
 
    [...form].map((e,i)=>{
        request = new XMLHttpRequest();
        request.open('POST',url);
 
        formData = new FormData(form[i]);
        formArray.push(formData);
        request.send(formArray[i]);
 
        request.addEventListener('readystatechange', function() {
            if (this.readyState == 4 && this.status == 200) {
                var data = this.responseText;
                actions(data);
            }
        });
    });
}
 
 
function actions(data){     // в этой функции, если нужно, работаешь с ответом от сервера --- если не нужно то удаляй ее и строку: actions(data) --- 22-ая строка
    document.getElementById('result').append(data);
}
В этом примере данный отсылаются из двух форм в файл handler.php :
PHP
1
2
3
foreach ($_POST as $value) {
    echo $value.'-----';
}
Добавлено через 6 минут
Kadad,
В данном примере 2 формы, соответственно на стороне сервера у тебя будет два $_POST['name'] и два $_POST['phone'] --- думаю тебе не нужно объяснять как в таком случае инсертить их в БД ? Или объяснить ?
0
249 / 162 / 68
Регистрация: 10.12.2017
Сообщений: 558
19.07.2018, 13:18
zlojnaxa, Kadad,
PHP/HTML
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
<form action='data.php' method='post'>
<input type="text" name="name">
<input type="text" name="phone">
<input type="submit" name="submit" value="ОТПРАВИТЬ">
<input type="hidden" name="id" value="id1">
</form>
 
<form action='data.php' method='post'>
<input type="text" name="name">
<input type="text" name="phone">
<input type="submit" name="submit" value="ОТПРАВИТЬ">
<input type="hidden" name="id" value="id2">
</form>
 
<a href="#" onclick="" class="sendAll">Отправить все формы</a>
<br/>
<textarea id="results" style="width: 100%; height: 200px"></textarea>
 
<script>
  document.querySelector('.sendAll').addEventListener('click', (e) => {
    e.preventDefault()
    var promiseAll = []
    document.querySelectorAll('form').forEach(form => {
      promiseAll.push(fetch('data.php', { method: 'POST', body: new FormData(form) }).then(r => r.text()))
    })
    Promise.all(promiseAll).then(results => {
      document.getElementById('results').value = results
      console.log(results)
    })
  })
</script>
Промисы, в целом это нужно если надо дождаться все ответы от сервера одновременно

JavaScript
1
2
3
4
5
6
7
8
<script>
  document.querySelector('.sendAll').addEventListener('click', (e) => {
    e.preventDefault()
    document.querySelectorAll('form').forEach(form => {
      fetch('data.php', { method: 'POST', body: new FormData(form) }).then(r => r.text())
    })
  })
</script>
или если запустил и забыл...

PHP
1
2
3
<?php
 
var_export($_POST);
0
Эксперт JS
2037 / 1096 / 409
Регистрация: 29.04.2016
Сообщений: 2,625
19.07.2018, 13:45
Evgen1337, Молодец )
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
19.07.2018, 13:45
Помогаю со студенческими работами здесь

Отправка форм
Здравствуйте, подскажите пожалуйста, я заметил что на сайтах в отправках форм по мимо отправляемых данных отправляется еше token/id и т.п,...

Отправка форм на бд
Помогите пожалуйста сделать отправку данных заполненных форм мне на бд, желательно в свои списки. Работаю на DLE &lt;ul...

Отправка форм PHP
Здравствуйте. Я начинающий web-разработчик. Еще очень мало знаю. Решил создать простенький сайт, но столкнулся с проблемой. У меня не...

Отправка форм на почту
Есть хитрый калькулятор, но нет отправки форм на почту. Нужно отправить введенные данные и результат на почту, при нажатии на кнопку...

Отправка 2 форм 1 сабмитом
Добрый день! Есть две формы одна отсылает письмо на почту. Вторая переходит на сайт оплаты QIWI. Внимание вопрос: Не нажимать же...


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

Или воспользуйтесь поиском по форуму:
15
Ответ Создать тему
Новые блоги и статьи
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(), которая. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru