Как отправлять каждую строку формы AJAX?

Question

[Иван]

Коллеги, привет!

Передо мной стоит такая задача. Есть форма в модальном окне с n строк (количество строк может быть разным) т.к форма создается в динамически. В каждой строке есть скрытый input c значением id .

Вопрос заключается в том, как мне отправлять каждую строку в обработку на сервер?

Заранее благодарю Вас за потраченное время и полезную информацию.

Comments

[Пашенька]

Гуглите formData.

[Иван]

Пашенька, это понятно. у меня трудность заключается как из каждой строки в цикле собрать FormData. )

[Пашенька]

Иван, ничего не нужно собирать, передаётся вся форма: new FormData(formElement)

[Иван]

Пашенька, да, Вы правы. Но задача стоит в том, что бы получать ответ по каждой строке и выводить результат поочередно.

[Пашенька]

Иван, Можно и руками все поля обойти и заслать на сервер, но я вам подсказал как наиболее просто отправить динамическую форму, все поля придут на сервер в массиве $_POST, там обходите его циклом. Я не понимаю, в чем у вас проблема?

[Иван]

Пашенька, в том, что если я передам FormData общую всех строк, то и ответ от сервера я получу тоже общий (массив с результатами для каждой строки). А мне нужно, что бы отправлялась первая строка - выводился результат, затем вторая строка - результат, и так далее.

[Пашенька]

Иван, тогда проходите циклом по строкам, берёте первую строку(их, кстати, тоже формами надо бы сделать, ведь в одной строке несколько полей, тогда тоже можно использовать formData), отправляете на сервер и ждёте ответа, следующая итерация должна ждать ответа от предыдущей итерации.

[ThunderCat]

Иван,

А мне нужно, что бы отправлялась первая строка - выводился результат, затем вторая строка - результат, и так далее.

А в чем, простите, сакральный смысл этого вывода по строчкам? Просто все по своем местам сразу за один запрос не судьба раскидать? Каким образом это влияет на функционал?

Answer 1

[Владимир Коротенко]

0. какой то идентификатор карточки (42)
1. создание строки - (видимо ничего не делать? но создать идентификтор (23))
2. ввод данных - (дождаться завершения и отправить на сервер POST /api/form/42/row/23 {какой то джисон описывающий строку} )

Где то так.
В javascript подписываетесь на события onchange. Ну а дальше вызываете что то типа fetch или https://developer.mozilla.org/ru/docs/Web/API/XMLH...

Обработка удаления строк по усмотрению