Собрать строки с полями в массив

Тема в разделе "JavaScript", создана пользователем Genk0, 6 июл 2015.

Модераторы: ZiX
  1. Genk0

    Genk0 Инквизитор из раздела J!

    Moderator
    Регистр.:
    2 июн 2010
    Сообщения:
    1.627
    Симпатии:
    1.330
    11.png
    Для наглядности сразу по картинке
    Есть несколько строк от 1 до 50
    В каждой строке 4 (или больше) поля.
    По клику на кнопку "отправить" нужно собрать каждую строку в массивы и одним массивом отправить "куда нибудь".
    Событие на кнопке и отправка не проблема, интересует
    1. Как правильно называть поля в каждой строке - все одинаково в каждой строке?
    photo,name,descr,price
    photo,name,descr,price
    photo,name,descr,price
    2. Как потом собрать это в массив для отправки
    0=>array(photo,name,descr,price),2=>array(photo,name,descr,price) примерно так
    Чтобы потом это все обработать пачкой.
    3. 2 вариант, тоже нужен, как в jquery построчно отправлять данные на php обработчик?
    типа
    $('#addlink').on('click', function () {
    $('.table .row').each(function () {
    отправляем на обработчик;
    });
    return false;
    });
    3.2 По второму варианту
    Нужно чтобы этот each ждал ответа от обработчика для первой строки, потом сделал допустим удалением строки с товаром, потом пошел ко второй строке и т.д.

    Надеюсь более менее понятно объяснил)

    Ах да, отправлять на обработку нужно только чекнутые галкой товары
     
  2. Viodele

    Viodele Механик

    Administrator
    Регистр.:
    17 дек 2011
    Сообщения:
    110
    Симпатии:
    480
    Я не особо понимаю, зачем так извращаться и придумывать еще какой-то сборщик данных. Если все данные размещены в теге form, их достаточно просто можно собрать функцией jQuery .serialize(). Кроме того, если при отправке формы ее элементы будут иметь имена типа field[] - их автоматом конвертирует в массив.

    <input type="text" name="field[]" value="1"/>
    <input type="text" name="field[]" value="2"/>
    <input type="text" name="field[]" value="3"/>
     
    Genk0 нравится это.
  3. Genk0

    Genk0 Инквизитор из раздела J!

    Moderator
    Регистр.:
    2 июн 2010
    Сообщения:
    1.627
    Симпатии:
    1.330
    Помимо этой формы есть еще 2 формы внутри этой с 3 лишними кнопками, а есть еще куча скрытых полей)
    serialize знаю, думал может какие другие есть варианты. за поля спасибо
     
  4. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    340
    Симпатии:
    162
    Делал что-то подобное, только плюсом были поля артикула и значение option. Набросал примерно по памяти.
    Код:
    $(document).ready(function(){
      $('.addlink').on('click', function () {
    var productList = {};
    $('input:checked').each(function(i){
      var $this = $(this);
    productList['id'+i] =  {
    photo : $this.siblings('img').attr('src'),
    name : $this.siblings('.name').html(),
    desc : $this.siblings('.desc').html(),
    price : $this.siblings('.price').html()
    };
    });
    });
    });
    На всякий случай
    Код:
      <a class="addlink">Click</a>
    
    <div class="product">
    <input type="checkbox">
    <img class="photo" src="path/Image1.JPG">
    <div class="name">Имя товара1</div>
    <div class="desc">Описание товара1</div>
    <div class="price">1000</div>
    </div>
    
    <div class="product">
    <input type="checkbox">
    <img class="photo" src="path/Image2.JPG">
    <div class="name">Имя товара2</div>
    <div class="desc">Описание товара3</div>
    <div class="price">900</div>
    </div>
    
    <div class="product">
    <input type="checkbox">
    <img class="photo" src="path/Image3.JPG">
    <div class="name">Имя товара3</div>
    <div class="desc">Описание товара3</div>
    <div class="price">700</div>
    </div>
    
    <div class="product">
    <input type="checkbox">
    <img class="photo" src="path/Image4.JPG">
    <div class="name">Имя товара4</div>
    <div class="desc">Описание товара4</div>
    <div class="price">500</div>
    </div>
    По второму варианту. Для построчной отправки замыкал вызов функции через ajax success. То есть нажатие "Отправить" запускала функцию, которая инициализировала отправку на jquery ajax - succes снова запускал эту функцию и удалял первое значение из массива, а в запросе data всегда подставлялось значение array[0]. Примерно так)
     
    Последнее редактирование: 6 июл 2015
    Genk0 нравится это.
  5. denverkurt

    denverkurt Denve®

    Регистр.:
    23 дек 2013
    Сообщения:
    610
    Симпатии:
    348
    еще можно для каждого товара сделать поле
    Код:
    <input type="hidden" name="id[]" value="123" />
    или
    <input type="checkbox" name="id[]" value="123" />
    а поля этого товара в виде массива с этим ID
    Код:
    <input type="text" name="param[123][text]" value="" />
    <input type="text" name="param[123][text2]" value="" />
    <textarea name="param[123][textarea]"></textarea>
     
    Последнее редактирование: 7 июл 2015
    Genk0 нравится это.
  6. Genk0

    Genk0 Инквизитор из раздела J!

    Moderator
    Регистр.:
    2 июн 2010
    Сообщения:
    1.627
    Симпатии:
    1.330
    Хорошо, а как мне перебирать только те наборы полей (строки на скрине) которые отмечены чекбоксом?
    Не могу доехать как устроить проверку
     
  7. BaBL

    BaBL Постоялец

    Регистр.:
    13 ноя 2012
    Сообщения:
    144
    Симпатии:
    87
    А зачем? Сабмить все вместе с чекбоксами и банальным foreach($_POST['checkboxparam'] as $id => $value) на стороне сервера смотри. Если он включен - работаешь с name[$id]. description[$id] и param[$id], если не включен - просто continue.

    Ты лишний гемморой изобретаешь. Варианты 3 и 4 - вообще ад, это ж сколько запросов надо отправлять? Самое долгое и непонятное решение. Что касается других "подформ" - забей на них, они в твоем обработчике никак не участвуют. Если ты все формы сабмитишь на один обработчик - добавь name и value кнопке и по ней определяй текущее действие (посмотри как реализуют add / update кнопки в разных проектах. Форма одна - обработчики разные)
     
  8. Genk0

    Genk0 Инквизитор из раздела J!

    Moderator
    Регистр.:
    2 июн 2010
    Сообщения:
    1.627
    Симпатии:
    1.330
    Дело в том, что приемщик не может обработать больше 3 запросов в секунду, мало того, клиент просит прогресс бар, чтобы ему не ладно жилось.
    Поэтому и было решено обрабатывать изначально построчно с задержкой через jquery, а не сразу на стороне сервера принимая весь POST страницы.
    Клиент нажал отправить 50 товаров, и обработчик думает около минуты, а то и больше кто его знает а тут прогресс бар будет стоять - отправлено 10 товаров из 50 и 10 строк пометилось допустим стилем и текстом (обработано).
     
  9. BaBL

    BaBL Постоялец

    Регистр.:
    13 ноя 2012
    Сообщения:
    144
    Симпатии:
    87
    Тогда вы в принципе это через зад делаете. Посмотрите на паттерн Deffered Queue, он сделан как раз для вашего случая.
     
  10. denverkurt

    denverkurt Denve®

    Регистр.:
    23 дек 2013
    Сообщения:
    610
    Симпатии:
    348
    Код:
    jQuery('input:checkbox[name="id[]"]:checked').each(function(){
    //тут перебор чекбоксов и обработка полей
    });
    
     
    Genk0 нравится это.