Собрать данные с checkbox и select в массив

529

24 ноября 2016, 09:55

Добрый день. Есть форма, вот ее основной блок, таких блоков несколько, различаются они только значением input с классом osnova (Программа 1, программа 2 и т.д.)

<div class="progblock">
<label class="bold_name"><input type="checkbox" name="public" class="public osnova" value="Программа 1" > Программа 1</label>
<div class="napravlenie hides" style="display:none;">
        <div class="checkbox col-xs-6 forma_obuchen">
            <select name="ot_forma1" class="form-control">
                           <option value="">Форма обучения</option>
               <option value="Очная">Очная</option>
               <option value="Дистанционная">Дистанционная</option>
            </select>
        </div>
        <div class="checkbox col-xs-6 kolvo_uchenik">
        <input type="number" name="ot_kolvo1" value="" class="form-control" placeholder="Число слушателей">
        </div>
        </div>
<div class="clearfix"></div>
</div>
<a href="#" class="podtv">Заполнить форму</a>

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

Данные выбранных чекбокосов я забиваю в массив таким методом: var arr=$('input:checkbox:checked').map(function() {return this.value;}).get();

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

array {
[0] = Array {
                 [0] = Программа 1
                 [1] = Дистанционная
                 [2] = 5
                 }
[1] = Array {
                 [0] = Программа 1
                 [1] = Очная
                 [2] = 10
                 }
...
}

UPD На данный момент у меня на выходе получается массив объектов. А как его разобрать по отдельным значениям и вывести в другом месте?

var arr= [].map.call($('input:checkbox:checked'),function(el) {
        var parent = $(el).parents('.progblock');
        return {'name' : el.value, 'type' : $('select',parent).val(), 'val' : $('[type="number"]',parent).val()}});
        arr = JSON.stringify(arr, null, 4);
        var mass = JSON.parse(arr);

Answer 1

Как-то так:

let log  = document.querySelector('#log'), 
    root = document.querySelector('#root'); 
 
document.querySelector('#buildListBtn').addEventListener('click', _ => { 
  let res = []; 
   
  Array.from(root.querySelectorAll('.part')).forEach(e => { 
    res.push([e.dataset.name].concat(Array.from(e.querySelectorAll('input,select')).map(e => e.value))); 
  }); 
   
  log.innerHTML = JSON.stringify(res, null, '  '); 
});

<form id='root'> 
  <div class='part' data-name='Программа 1'> 
    <select class='form'> 
      <option value='Очная'>Очная</option> 
      <option value='Заочная'>Заочная</option> 
      <option value='Очешуенная'>Очешуенная</option> 
    </select><br /> 
    <input type='number' value='10' placeholder='Количество слушателей' /> 
  </div><br /> 
  <div class='part' data-name='Программа 2'> 
    <select class='form'> 
      <option value='Очная'>Очная</option> 
      <option value='Заочная' selected>Заочная</option> 
      <option value='Очешуенная'>Очешуенная</option> 
    </select><br /> 
    <input type='number' value='20' placeholder='Количество слушателей' /> 
  </div><br /> 
  <div class='part' data-name='Программа 3'> 
    <select class='form'> 
      <option value='Очная'>Очная</option> 
      <option value='Заочная'>Заочная</option> 
      <option value='Очешуенная' selected>Очешуенная</option> 
    </select><br /> 
    <input type='number' value='30' placeholder='Количество слушателей' /> 
  </div> 
  <hr /> 
  <input type='button' id='buildListBtn' value='Сформировать список' /> 
</form> 
<pre id='log'></pre>