Как создать форму, чтобы при отправке ее ajax'ом собрать все поля?

Question

[KOPC1886]

Всем привет!

Как создать такую форму, в которой есть поля типа файл(чтобы можно было много файлов добавлять), так же поля множественного типа, например несколько категорий и так далее.

И чтобы эту форму просто отправить аяксом и потом на серверной стороне собрать все поля ?

Answer 1

[Александр Миранович]

Сначала делай проверку изменение input type=file , если изменился, добавляй еще один input type=file, задай всем полям name, а дальше читай как отправить форму ajax'ом

Answer 2

[KOPC1886]

Лучше форму создать и добавить name полям или лучше без формы, и потом самим собирать нужные id в массивы и отправлять аякс-запрос ? как лучше сделать? я думал может форму такую сложную проще будет сделать через angular ? или лучше в ручную через jquery ?

Comments

[Sergey Romanov]

Вы написали ответ на свой вопрос. Это не обсуждения как на форуме. Вы можете добавить только один ответ. И это должен быть ответ. Если есть добавления и пояснения, редактируем вопрос. Или пишем в комментариях.

Answer 3

[Сергей Гладковский]

Сделайте нормально форму и обработайте её плагинчиком типа https://github.com/malsup/form/. Будет Вам обычная отправка формы, только ajax-ом...

Comments

[KOPC1886]

У меня там просто поля будут не только типа text, file. Но еще и подключу wysawig-редактор. Так же поля некоторые будут множественные. Не знаю как все это реализовать.

[Сергей Гладковский]

WYSIWYG подтюнить слегка на изменение чтобы писал в textfield - строчка кода. С множественными полями тоже не проблема - правильно пишите атрибут name.

[KOPC1886]

а как его писать? name="ADDITIONAL_CATEGORIES[]" ?

[Сергей Гладковский]

true

[KOPC1886]

как вообще реализовать множественное добавление?

[KOPC1886]

А в форме в action что писать? javascript:void(0) ?

[Сергей Гладковский]

нет - url, куда отправляете форму. Оформляете всё, как всегда, ничего не отличается от стандартного сабмита, разве что будет отправляться ajax-ом...

[Сергей Гладковский]

[KOPC1886]

Подскажите, вот я ввел название категории, куда мне добавлять id этой категории, чтобы потом в серверной части получить id этой категории? Или как реализовывается это?

[Сергей Гладковский]

Вы уже начинаете спрашивать про то, как Вам замешать бетон, хотя изначальный вопрос был - каким краном строить дом... ;)

[KOPC1886]

Я просто не делал ни разу так и не знаю как реализовать правильно и чтобы потом не пришлось переделывать из-за того, что решил использовать форму

[Сергей Гладковский]

Вы не разу не делали Форму? Тогда Вам лучше сначала изучить всё, что касается этого вопроса, естественно, в разрезе ЯП, что пользуете на сервере.

[KOPC1886]

Делал форму, но без множественных выборов. Не очень понимаю как это реализовать

[Сергей Гладковский]

name="ADDITIONAL_CATEGORIES[]" и на сервере получаете массив значений. Дальше - уже то, что нужно делайте с учётом этих знаний. В любом случае, сделать и проверить, как оно будет работать в любом случае быстрее, чем получить ответ тут - нет? :)

[KOPC1886]

Да вот я сейчас написал, но что то не отправляется форма...вообще при нажатии ничего не происходит.

[Сергей Гладковский]

Смотрите консоль браузера. Если подключили плагин и натравили его на форму, оно же ajax-ом будет отправлять (что Вам и нужно было). А лучше всего, оттестируйте сначала без ajax-а отправку формы и обработку результата...

[KOPC1886]

Сергей Гладковский:

Такая ситуация, что форму отправляю методом POST, а ангуляр POST не может прочесть и поэтому я делаю на серверной части $ajaxParams = json_decode(trim(file_get_contents('php://input')), true);

но сюда не приходит POST...что сделать тогда?

У меня просто все обработчики в одном файле

[Сергей Гладковский]

Попробуйте обратиться к $_POST массиву...

Answer 4

[Rafael Hovhannisyan]

в jQuery есть такая функция специально для собирания всех полей, api.jquery.com/serialize/.

var postData = $("form").serialize();

Comments

[KOPC1886]

а на серверной части делать unserialize ?

[Rafael Hovhannisyan]

KOPC1886: именно :)

[KOPC1886]

Rafael Hovhannisyan: Делал, возвращает false. Мне там приходит строка вида "key=value&key1=value1"

[Rafael Hovhannisyan]

извините, я перепутал, "key=value&key1=value1" это уже надо прикрепить к строке GET и отправить по аяксу.

var formStr = "key=value&key1=value1";
$.post("ajax.php?" + formStr, {}, function() {});

как обыкновенный GET запрос.

Answer 5

[Sergey Romanov]

В ангуляр, в контролере обявите переменную.

$scope.form = {}

А в шаблонах связывайте все с этой переменной. Например.

User name: <input ng-model="form.user" type="text" />

Таким образом у вас все данные будут в $scope.form. Прсто передадите это в $http когда будете делать запрос на сервер и там будет все что только есть на форме.

Comments

[KOPC1886]

А как сделать множественное поле? Допустим типа файл, или типа text ?

[KOPC1886]

И еще, как быть с angucomplete-alt ? У меня он еще подключен.

[Sergey Romanov]

KOPC1886: Вот идея быстренько. Ну конечнонужно файл ридер что бы получать данные. Но суть не в том.

jsfiddle.net/Serhioromano/kxfb0xwf

[KOPC1886]

Sergey Romanov: а почему бы не создать просто форму и отправить ее ajax'ом с помощью плагина https://github.com/malsup/form/. Только проблема у меня в том, что на странице, где я обрабатываю аякс-запросы у меня в начала прописана такая строчка
$ajaxParams = json_decode(trim(file_get_contents('php://input')), true), потому что ангуляр не может прочесть $_POST. Как быть в этой ситуации?

[Sergey Romanov]

KOPC1886: можно и так. Но тогда зачем использовать Ангуляр? Это вопрос ни имеет к нему ни какого отношения. Уберите этот тег.