Как отправить (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 формы, для второй...

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

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

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

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

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

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

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

Войти через центр авторизации

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

JavaScript

+3 ещё

Простой
Автоматизация заказа из кофеаппарата?
- 1 подписчик
- час назад
- 78 просмотров
1

ответ
JavaScript

Простой
Турнирный модуль для игр Counter-Strike, DOTA2 и т.д.?
- 1 подписчик
- час назад
- 39 просмотров
0

ответов
JavaScript

Простой
Как определить, загрузился ли скрипт или нет?
- 2 подписчика
- 3 часа назад
- 135 просмотров
1

ответ
JavaScript

Средний
Где найти маску для телефона работающую корректно?
- 1 подписчик
- 18 часов назад
- 97 просмотров
3

ответа
JavaScript

Простой
Как разэкранировать строку js?
- 1 подписчик
- 19 часов назад
- 81 просмотр
1

ответ
JavaScript

+1 ещё

Простой
Получение координат графика в Canvas?
- 1 подписчик
- 21 час назад
- 36 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Какие инструменты для анализа React JS кода использовать?
- 1 подписчик
- 22 часа назад
- 69 просмотров
0

ответов
JavaScript

Простой
Как создать динамическую переменную?
- 1 подписчик
- 23 часа назад
- 80 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему не запрашивает разрешение на уведомление pwa-push- ios?
- 1 подписчик
- вчера
- 42 просмотра
0

ответов
HTML

Простой
Не могу задать ширину таблицы html?
- 1 подписчик
- вчера
- 60 просмотров
1

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

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

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

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

вАйТи

от 5 000 до 25 000 ₽

JavaScript Developer (backend / fullstack)

Brightdata • Тель-Авив

от 5 500 до 6 500 $

Приложение доставки с бонусной системой

08 мая 2024, в 12:14

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

Программа для диплома

08 мая 2024, в 12:04

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

Настройка CDN сервиса на базе AWS/AWS Route 53/AWS Amplify

08 мая 2024, в 11:40

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

А почему бы не получать данные из инпутов а уже в файле 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) все формы на странице?

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

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

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