Как передать массив из формы в PHP методом AJAX?

Question

[Cheizer]

Друзья, уже прям никаких мыслей нет, не знаю как сделать, впервые сталкиваюсь с такой задачей.

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

<div class="option">
<span class="name">РАЗМЕР</span>
<select class="option-select">
......
</select>
<input type="hidden" class="name-option" name="name-option[]" value="РАЗМЕР">
<input type="hidden" class="value-option" name="value-option[]" value="XL">
</div>

<div class="option">
<span class="name">ШТ</span>
<select class="option-select">
......
</select>
<input type="hidden" class="name-option" name="name-option[]" value="ШТ">
<input type="hidden" class="value-option" name="value-option[]" value="5">
</div>

<div class="option">
<span class="name">ПОЛ</span>
<select class="option-select">
......
</select>
<input type="hidden" class="name-option" name="name-option[]" value="ПОЛ">
<input type="hidden" class="value-option" name="value-option[]" value="М">
</div>

.....

Дальше форма отправляется в файл form.js откуда AJAX ом передает в файл php для отправки.
A фале form.js принимаю так

$.ajax({
    type: "POST",
    url:   "send.php",
   data: {
             options:  name-option,
             valueoptions:  value-option
            },

});

..... далее в файл send.php принимаю POST массив и перебираю там есть знания уже, но беда в том что я не правильно или собираю массив или передаю его в файл form.js все время вылетает JS ошибка, что не так делаю? Как делается в таком случае?

Answer 1

[Дмитрий]

data: $('form').serialize()

Comments

[Cheizer]

не понимаю как использовать serialize, у меня в data еще много простых полей name phone и тд, так не будет работать

data: {
         name: ......,
       phone: .........,
       option:  .serialize()
            },

[frees2]

#answer_1177946@Cheizer,
Вот до сих пор формой пользуюсь, даже не знаю чем заменить.
Там конечно просто, но у меня с этой формой обработка php, упрощённо так...
send.php

if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
{ header('Content-Type: text/html; charset=utf-8');
 
if (isset($_POST['message'])) { $v=$_POST['message'];

[Cheizer]

frees2, я уже все, тупо не могу получить и передать массив AJAX, а то что вы написали мне вообще не понятно какое отношение к моему геморою имеет :)

[frees2]

Роман Кузнецов, Ну так получаю такой же массив и обрабатываю в php, а в php можно извращаться со строками

[Cheizer]

frees2, я до php еще не добрался, на этапе из формы в AJAX не получается передать

[Сергей delphinpro]

Роман Кузнецов, serialize собирает все элементы формы
Поэтому достаточно вызвать этот метод

$('.myform').on('submit', function(){
  var $thisForm = $(this);
  $.ajax({
    type: "POST",
    url : "send.php",
    data: $thisForm.serialize(),
  });
});

[Cheizer]

Сергей, Спасибо, но значит serialize мне не подходит :( у меня все поля отдельно собираются и передаются в php и там уже отправляются на почту

$.ajax({
                                type: "POST",
                                url: _.mailHandlerURL,
                                data: {
                                    name: _.getValFromLabel($('.name', _.form)),
                                    email: _.getValFromLabel($('.email', _.form)),
                                    phone: _.getValFromLabel($('.phone', _.form)),
                                },
                            })

но появились поля массивы и все, я встал

[frees2]

Роман Кузнецов, send.php print_r($_POST);

$(function() {
                $("#frm_details").on("submit", function(event) {
                    event.preventDefault();

                    $.ajax({
                        url: "send.php",
                        type: "post",
                        data: $(this).serialize(),
                        success: function(d) {
                            alert(d);
                        }
                    });
                });
            });

<form name="frm_details" id="frm_details" method="post">

[Сергей delphinpro]

Роман Кузнецов, Чем вас поля-массивы пугают?

[Сергей delphinpro]

Роман Кузнецов, К тому же массивы — единственный выход, если количество полей вам неизвестно.

[Cheizer]

непонимаю как передать, вот есть одно поле email, одно поле phone и они заранее известны их класс и тд, с этим легко, но появились динамические поля, причем по два, которые создаются на лету пользователем, опции.

1 опция
<input type="hidden" class="name-option" name="nameoption" value="РАЗМЕР">
<input type="hidden" class="val-option" name="valoption" value="XL">

					 				  
2 опция
<input type="hidden" class="name-option" name="nameoption" value="КОЛИЧЕСТВО">
<input type="hidden" class="val-option" name="valoption" value="5">

И как это все собрать и отрпавить AJAX ом в PHP ума не приложу, что бы в итоге распечатать так:

0: Размер = XL
1: Количество = 5

[Cheizer]

frees2, спасибо, но я не могу использовать serialise у меня много простых полей в data. И в php уже куча кода что бы их все принять и обработать, вся логика.

$.ajax({
                                type: "POST",
                                url: _.mailHandlerURL,
                                data: {
                                    name: _.getValFromLabel($('.name', _.form)),
                                    email: _.getValFromLabel($('.email', _.form)),
                                    phone: _.getValFromLabel($('.phone', _.form)),
                                },
                            })

[Cheizer]

Сергей, я так понимаю мне каждую опцию из двух полей сделать массивом надо и как то слить в одно?

1 опция
<input type="hidden" class="name-option" name="nameoption[]" value="РАЗМЕР">
<input type="hidden" class="val-option" name="valoption[]" value="XL">

и слить в один массив

var arroption = [];
nameoption.push(arroption);
valoption.push(arroption);

Или это тоже не правильное направление?

[Сергей delphinpro]

Роман Кузнецов, вы можете использовать многомерный массив

<input type="hidden" class="name-option" name="option[1][name]" value="РАЗМЕР">
<input type="hidden" class="val-option" name="option[1][val]" value="XL">

<input type="hidden" class="name-option" name="option[2][name]" value="РАЗМЕР">
<input type="hidden" class="val-option" name="option[2][val]" value="XL">

[Cheizer]

Сергей, Ок, так смогу сделать, а как это передать в AJAX?

$.ajax({
                                type: "POST",
                                url: _.mailHandlerURL,
                                data: {
                                    name: _.getValFromLabel($('.name', _.form)),
                                    email: _.getValFromLabel($('.email', _.form)),
                                    phone: _.getValFromLabel($('.phone', _.form)),
                                   
                                  option: option[]
                  
                                },
                            })

Так как то?

[Сергей delphinpro]

Роман Кузнецов, O_O .serialize()

[Сергей delphinpro]

Роман Кузнецов, еще вариант

$('.myform').on('submit', function(){
  var fd = new FormData(this);
  $.ajax({
    type: "POST",
    url : "send.php",
    data: fd,
  });
});

но это, в принципе, даст тот же результат, только менее кроссбраузерно.

[Cheizer]

Сергей, Разве нельзя это отправить с такой структурой? Без serialize

$.ajax({
                                type: "POST",
                                url: _.mailHandlerURL,
                                data: {
                                    name: _.getValFromLabel($('.name', _.form)),
                                    email: _.getValFromLabel($('.email', _.form)),
                                    phone: _.getValFromLabel($('.phone', _.form)),
                                   
                                  option: option[]
                  
                                },
                            })

[Cheizer]

Сергей, не могу оборачивать AJAX функцию :( там много простых полей отправляется еще, там проверки, большой код, и в нем AJAX отправка, и data менять не могу только добавлять поля

$.ajax({
                                type: "POST",
                                url: _.mailHandlerURL,
                                data: {
                                    name: _.getValFromLabel($('.name', _.form)),
                                    email: _.getValFromLabel($('.email', _.form)),
                                    phone: _.getValFromLabel($('.phone', _.form)),
                                   
                                  option: option[]
                  
                                },
                            })

[Cheizer]

Сергей, Спасибо, использую ваш вариант полей

<input type="hidden" class="name-option" name="option[2][name]" value="РАЗМЕР">
<input type="hidden" class="val-option" name="option[2][val]" value="XL">

Но к сожалению все проверки остальных полей полетели к черту, так как у каждого поля проверка была по label

<label class="name">
<input type="text" value="" name="name" placeholder="Введите ваше имя:">
<span class="error error-empty">*</span>
</label>

И поэтому в AJAX каждое поле отдельное отправлялось и значения собирались через getValFromLabel

$.ajax({
                                type: "POST",
                                url: _.mailHandlerURL,
                                data: {
                                    name: _.getValFromLabel($('.name', _.form)),
                                    email: _.getValFromLabel($('.email', _.form)),
                                    phone: _.getValFromLabel($('.phone', _.form)),
                                },
                            })

Теперь пипец, все поля пролетели проверку из за serialize и непонятно как все переделывать, код огромный проверки. :( Одно решил а остальное отваливается, непонятно как это все подружить.

[Сергей delphinpro]

Роман Кузнецов, Если всё так сложно, лучше не трогать то, что работает =)