Ручное формирование FormData object

[Aeooe]

Доброго времени суток, форумчане!

Имеется задумка вручную формировать FormData object и отправить его ajax jquery.

 

Имеем динамически формируемая From'a и прочие элементы веб интерфейса, которыми пользователь может управлять. Нам надо собрать объект FormData и отправить его ajax'ом POST.

 

За ошибка в синтаксисе не ругайте =) Вопрос не в синтаксисе, а в пробеле знаний в области формирования объектов, и объектов типа FormData

 

Пример кода:

 

 

name = document.getElementsById....value;

body = document.getElementsById....value;

tags = document.getElementsById....value;

var data = new FormData();

data.append('name',name);

data.append('body',body);

data.append('tags',tags);



var options =  new FormData(document.getElementsById('form'));



data.append('options',options);

....

далее ajax post

 

Собственно в чем проблема! Мне нужно добавить свойство "options" объекта data, которое равно форме и отправить ajax'ом на сервер, таким образом, чтобы получить массив POST, например:

 

array (

  'name' => 'Name',

  'body' => 'Body',

  'tags' => 'Tags',

  'options' => array (

      'option1' => 'Option1',

      'option2' => 'Option2',

      'option3' => 'Option3',

      'option4' => 'Option4',

      'option5' => 'Option5',

      'option6' => 'Option6'

      .... ну и тд

  )

)

Как грамотно решить подобную задачу? =)

[wwt]

data.append("options[option1]", 'Option1');

data.append("options[option2]", 'Option2');

//...

[Aeooe]

data.append("options[option1]", 'Option1');data.append("options[option2]", 'Option2');//...

Трабл в том, что бы сделать так:

data.append("options",FormData(form));

Нужно append динамической формы. Может ее как то можно разобрать на свойства? Прогнуть в цикле и сформировать append по вашему примеру?

 

PS Рыл в нете, но так и не нашел как перебрать свойства объекта FromData... Полагаю это связано с форматом данных "multipart/form-data" объекта FormData

Edited December 22, 2015 by Aeooe

[wwt]

Ну так можно так:

<form action="" id="test">  <input type="text" name="options[option1]" value="111">  <input type="text" name="options[option2]" value="222">  <input type="text" name="options[option3]" value="333"></form>

var data = new FormData(document.getElementById('test'));

[wwt]

ещё вариант:

<form action="" id="test">  <input type="text" name="options" value="111">  <input type="text" name="options" value="222">  <input type="text" name="options" value="333"></form>

var options = new FormData(document.getElementById('test'));var i = 1;var arr = options.getAll('options');for(var key in arr){   data.append("options[option"+(i++)+"]", arr[key]);}

Но это извращение какое-то.

[Aeooe]

Извиняюсь. =) Видимо ввел в заблуждение. Сейчас все подробно объясню. =)

 

Имеем следующий HTML:

<input type="text" name="name" value="1"><input type="text" name="sname" value="2"><input type="text" name="tags" value="3"><form action="" id="test"><input type="text" name="autor" value="Aturo"><input type="text" name="image[]" value="/path/to/image.jpg"><input type="text" name="image[]" value="/path/to/image.jpg">... и прочие динамически формируемые элементы формы, в основном это input</form><button onclick="send_ajax()"> Отправить </button>

Форма - это элемент дополнительных опций, который формируется динамически и имеет разнообразный набор элементов формы. Нужно перед отправкой собрать FormData вручную и отправить ajax. Хочется получить на сервере следующий массив POST:

$_POST = Array (  'name' => '1',  'sname' => '2',  'tags' => '3',  'options' => Array (                    'autor' => 'Autor',                    'image' => Array ( '/path/to/image.jpg', '/path/to/image2.jpg' ),                    ... прочие элементы формы                  ))

Т.е. необходимо получить следующую логику кода:

function send_ajax() {name = document.getElementsById....value;body = document.getElementsById....value;tags = document.getElementsById....value;var data = new FormData();data.append('name',name);data.append('body',body);data.append('tags',tags);var options =  new FormData(document.getElementsById('test'));data.append('options',options);....далее ajax post }

Необходимо запихнуть форму в элемент массива options в POST массиве параметров.

 

PS Для чего нам нужен такой массив? Хочется простым движением руки преобразовать  $_POST['options'] в JSON и записать в БД =)

Edited December 23, 2015 by Aeooe

[wwt]

Хочется простым движением руки преобразовать $_POST['options'] в JSON и записать в БД =)

 

Я вам выше написал решение, задавайте атрибуты name у полей соответствующие:

 

 

Ну так можно так:

<form action="" id="test">  <input type="text" name="options[option1]" value="111">  <input type="text" name="options[option2]" value="222">  <input type="text" name="options[option3]" value="333"></form>

var data = new FormData(document.getElementById('test'));

на стороне сервера это будет выглядеть так:

array('options' => array(  'option1' => 111  ,'option2' => 222  ,'option3' => 333  ))

просто начинайте собирать данные начиная с формы:

function send_ajax() {var data =  new FormData(document.getElementsById('test'));name = document.getElementsById....value;body = document.getElementsById....value;tags = document.getElementsById....value;data.append('name',name);data.append('body',body);data.append('tags',tags);....далее ajax post }

[Aeooe]

А ежели требуется вот такая запись формы:

<form action="" id="test"><input type="text" name="autor" value="Aturo"><input type="text" name="image[]" value="/path/to/image.jpg"><input type="text" name="image[]" value="/path/to/image.jpg">... и прочие динамически формируемые элементы формы, в основном это input</form>

Т.е. у нас есть несколько input с одинаковым именем которые должны отправить как массив. Как правильно преобразовать данную форму в ваш пример?

<form action="" id="test"><input type="text" name="options[option1]" value="111"><input type="text" name="options[option2[]]" value="222"><input type="text" name="options[option2[]]" value="333"></form>

Или

<form action="" id="test"><input type="text" name="options[option1]" value="111"><input type="text" name="options[option2][]" value="222"><input type="text" name="options[option2][]" value="333"></form>

?

[wwt]

e FormData по спецификации есть методы entries(), keys() и values() но браузеры еще их поддерживают частично или не поддерживают вообще, поэтому используйте пока что просто нужные имена полей, или собирайте параметры с помощью других средств к примеру с помощью селекторов:

<form action="" id="test">  <input type="text" name="option1" value="111" class="formdata">  <input type="text" name="option2" value="222" class="formdata">  <input type="text" name="option3" value="333" class="formdata"></form>

Да и JSON можно формировать на стороне клиента:

var fields = document.querySelectorAll('input.formdata');var options = {};for(var i = 0; i < fields.length ; i++){	options[fields[i].name] = fields[i].value;}var data = new FormData();data.append('options', JSON.stringify(options));//{"option1":"111","option2":"222","option3":"333"}

А ежели требуется вот такая запись формы:

<form action="" id="test"><input type="text" name="autor" value="Aturo"><input type="text" name="image[]" value="/path/to/image.jpg"><input type="text" name="image[]" value="/path/to/image.jpg">... и прочие динамически формируемые элементы формы, в основном это input</form>

Т.е. у нас есть несколько input с одинаковым именем которые должны отправить как массив. Как правильно преобразовать данную форму в ваш пример?

<form action="" id="test"><input type="text" name="options[option1]" value="111"><input type="text" name="options[option2[]]" value="222"><input type="text" name="options[option2[]]" value="333"></form>

Или

<form action="" id="test"><input type="text" name="options[option1]" value="111"><input type="text" name="options[option2][]" value="222"><input type="text" name="options[option2][]" value="333"></form>

?

последний вариант option[my][array][options][]

 

 

Т.е. у нас есть несколько input с одинаковым именем которые должны отправить как массив. Как правильно преобразовать данную форму в ваш пример?

 

кстати можно оставить так как есть:

<input type="text" name="image[]" value="/path/to/image.jpg"><input type="text" name="image[]" value="/path/to/image.jpg">

FormData корректно соберет данные(он не перезаписывает параметры с одинаковыми ключами), а php корректно их получит (имя должно заканчиваться на пустые [] или иметь разные ключи), в виде:

если name="image[]"array(0=>'/path/to/image.jpg', 1=>'/path/to/image.jpg')если ключи уникальные name="image[image1]" , name="image[image2]"  и т.д.array('image1'=>'/path/to/image.jpg', 'image2'=>'/path/to/image.jpg')

[Aeooe]

Спасибо =) Буду пробовать =)