Как отправить (submit) все формы на странице?

Question

Евгений Иванов @logpol32

Как отправить (submit) все формы на странице?

На странице есть несколько форм:

<form action="actions.php?action=table_save?id=1" method="POST">
<input  value="Текст в строке 1 столбце 1"  type="text" name="field1">
<input  value="Текст в строке 1 столбце 2"  type="text" name="field2">
</form>

<form action="actions.php?action=table_save?id=2" method="POST">
<input  value="Текст в строке 1 столбце 1"  type="text" name="field1">
<input  value="Текст в строке 1 столбце 2"  type="text" name="field2">
</form>

<form action="actions.php?action=table_save?id=3" method="POST">
<input  value="Текст в строке 1 столбце 1"  type="text" name="field1">
<input  value="Текст в строке 1 столбце 2"  type="text" name="field2">
</form>

Как можно сохранить все эти формы одновременно?
На странице нет лишних форм - т.е. проще говоря нужно submit все формы на странице.
Желательно сделать это с помощью javascript jquery.

PS
Насколько такое сохранение "нормально"?
Фактически будут последовательно вызваны SQL запросы UPDATE для 1 формы, для второй...

Вопрос задан более двух лет назад
177 просмотров

2 комментария

Подписаться 1 Средний 2 комментария

Решения вопроса 1

4 комментария

Евгений Иванов @logpol32 Автор вопроса

Надим Закиров, у меня это не работает.
Я плохо знаю jQuery и до конца не понимаю как и где вызывать асинхронные функции.
Ошибка Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules
С вашей функцией ни одна моя JS функция не работает. Видимо я вставляю вашу функцию не в то место.

Вот частично мой код

Ваша функция находится в скрипте script.js

<head>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/script.js"></script>
</head>
<! -- Форма на странице  -->
<form action="actions.php?action=table_save?id=19" method="POST">
<input  type="text" name="field1" value="Текст" >
<input  type="text" name="field2" value="Текст2" >
</form>

script.js

$(document).ready(function() {
// Тут другие мои простейшие функции.

AllFormSubmit();
});

async function AllFormSubmit() {

var promises = [];

// Щелчок по ссылке с классом submit_all_href
$('.submit_all_href').on('click', function(e){
	
  console.log('Клик'); // Этого мы не видим
	
  $('form').each(function(n, e) {
    promises.push($.ajax({
      'type': 'POST',
      'url': e.action,
      'processData': false,
      'contentType': false,
      'data': new FormData(e)
    }));
  });

  
  
  var results = await Promise.all(promises);
  
  
});
  
  
  
  console.log('Все формы со страницы успешно отправлены, результаты ниже:');
console.dir(results);
  
  return results;

}

Написано более двух лет назад

Надим @zkrvndm

Евгений Иванов, попробуй так:

$(document).ready(function() {
	
	// Тут другие мои простейшие функции (вставь свой код)
	
	// При клике на указанную кнопку
	// запустится функция sendAllForm():
	$('.submit_all_href').click(sendAllForm);
	
});

// Функция для отправки всех форм:

async function sendAllForm() {

	var promises = [];

	$('form').each(function(num, form) {
		promises.push($.ajax({
			'type': 'POST',
			'url': form.action,
			'processData': false,
			'contentType': false,
			'data': new FormData(form)
		}));
	});

	var results = await Promise.allSettled(promises);
	
	$.each(results, function(num, result) {
		if (result.value) {
			results[num] = result.value;
		} else {
			results[num] = 'Ошибка';
		}
	});
	
	console.log('Все формы со страницы успешно отправлены, результаты ниже:');
	console.dir(results);
	
	return results;

}

Написано более двух лет назад

Евгений Иванов @logpol32 Автор вопроса
Надим Закиров,
Вышло вот так. Это почти ваш скрипт, но с небольшим отличием.

$("#sub").click(function(){ $("form").each(function(){ var fd = new FormData($(this)[0]); $.ajax({ type: "POST", url: "solve.php", data: fd, processData: false, contentType: false, success: function(data,status) { //this will execute when form is submited without errors }, error: function(data, status) { //this will execute when get any error }, }); }); });

У меня в action формы был id table_save?id=19
В коде выше все передается post.
Поэтому я создал скрытое поле с id. И вроде всё работает.

И все же хочу спросить - такой способ передачи/сабмита не будет глючить?
В обработчике события простой Update таблицы. Обновить таблицу значениями полей.
В таблице 30 текстовых полей.

Форм 40.
То есть будет 40 апдейтов с одного клика.
За железо не беспокоюсь, а вот за браузер...
Написано более двух лет назад
Надим @zkrvndm

Евгений Иванов, ваш браузер спокойно потянет и 1000 запросов за это не беспокойтесь. Насчет же промисов, по правде говоря их использование это не чистый jQuery поэтому я переписал свой ответ - посмотрите его вновь. В новом варианте используются исключительно возможности самого jQuery и специальный объект Deferred, чтобы скопом обработать все ответы, рекомендую использовать этот вариант, у него поддержка браузерами будет тупо лучше.

Написано более двух лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

Простой
Fetch дает ошибку?
- 1 подписчик
- час назад
- 38 просмотров
0

ответов
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- 4 часа назад
- 60 просмотров
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- 7 часов назад
- 76 просмотров
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- 12 часов назад
- 71 просмотр
0

ответов
JavaScript

Простой
Обьясните про функцию массив?
- 3 подписчика
- 16 часов назад
- 287 просмотров
1

ответ
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 22 часа назад
- 69 просмотров
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 22 часа назад
- 50 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- вчера
- 58 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему JS не видит SVG-элементы по ID?
- 1 подписчик
- вчера
- 66 просмотров
1

ответ
JavaScript

Средний
Почему не срабатывает горячая клавиша в расширение?
- 1 подписчик
- вчера
- 40 просмотров
1

ответ
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Разработать телеграм mini app игру и бота

23 нояб. 2024, в 20:48

40000 руб./за проект

Ведение блогоаи продвижение в Instagram, TikTok и Телеграмм

23 нояб. 2024, в 20:46

50000 руб./за проект

Доработки шаблона Wordpress

23 нояб. 2024, в 20:39

3000 руб./за проект

А почему бы не получать данные из инпутов а уже в файле actions.php распределять данные?) Я конечно может что то не понимаю)
А так вот можно покопаться
Сначала хорошо бы понять почему это 3 разные формы, а не одна
Тем более, что в них одинаковые name.

Подозреваю, что вы творите что-то не то и решаете задачу не через то место.

Если нормально опишете, что происходит, то и нормальное решение найдется.

Answer 1 · 2021-12-20 10:21:47

На jQuery это делается примерно так:

var deferreds = []; // Массив для записи Deferred

// Перебором отправляем формы, создаем Deferred
// и добавляем их все в массив который создали выше:

$('form').each(function(num, form) {
	deferreds.push($.Deferred(function(deferred) {
		$.ajax({
			'type': 'POST',
			'url': form.action,
			'data': $(form).serialize(),
			'success': function(data) {
				deferred.resolve(data);
			},
			'error': function(xhr, status) {
				deferred.resolve(status);
			}
		});
	}));
});

// По завершению всех Deferred из массива
// выполняем указанную функцию, в нашем случае
// тупо выводим в консоли все полученные ответы:

$.when.apply($, deferreds).done(function() {
	console.log('Формы успешно отправлены, массив результатов ниже:');
	console.dir(arguments);
});

Как отправить (submit) все формы на странице?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт