Получение массива из значений инпутов и селектов

238

29 сентября 2017, 20:07

Здравствуйте! На сайте есть страница с несколькими селектами (содержимое берется из бд) и тем же количеством инпутов:

<div class="col-md-2 col-xs-12">
      <input class="form-control center" value="<?= $value['position'] ?>">
</div>
<div class="col-md-8 col-xs-12">
     <select class="select1 form-control">
         <option value="<?= $value['seo_url'] ?>" selected><?= $value['name'] ?></option>
             <? foreach ($url as $value1) {
                    if ($value['seo_url'] != $value1['seo_url']) {?>
                         <option value="<?= $value1['seo_url'] ?>"><?= $value1['name'] ?></option>
                  <?}
            }?>
     </select>
</div>

Необходимо при нажатии на кнопку .save получить массив вида
0: {position: "1", name: "гугл", url: "google.com"} 1: {position: "2", name: "яндекс", url: "yandex.ru"} ....

Пробую писать так, но ничего не получается:

$('.save').on('click', function(){
var result = [];
var typeValue = this.id;
    $('#myFormTop input').each(function () {<!--Получаем исходные значения!-->
        var select = $('+ select', this);
        result.push({
        input: $(this).val(),
        select: select.val(),
        url:  select.find('option:selected').text()
     });
    });
  console.log(result);
});

Инпуты и селекты:

<div class="col-xs-12">
                        <div class="col-md-2 col-xs-12">
                            <input class="form-control center" value="2">
                        </div>
                        <div class="col-md-8 col-xs-12">
                            <select class="select1 form-control">
                                <option value="" selected="">sd</option>
                                <option value="glavnaya_stranitsa">Главная страница</option>
                                <option value="o_kompanii">О компании</option>                                                                            
                                <option value="usloviya_vozvrata">Условия возврата</option>
                                                ...
                           </select>
                        </div>

Кнопка .save:

<div class="col-xs-12">
                <button class="save btn btn-danger" id="top" type="button">Сохранить</button>
 </div>

Answer 1

$('.save').on('click', function() { 
 
  var result = []; 
 
  var inputs = $('#myFormTop input'); 
  var selects = $('#myFormTop select'); 
  for (var i = 0; i < Math.min(inputs.length, selects.length); i++) { 
    var iValue = $(inputs[i]).val(); 
    var sValue = $(selects[i]).val(); 
    var sText = $(selects[i]).find('option:selected').text(); 
    result.push({ 
      input: iValue, 
      select: sValue, 
      url: sText 
    }); 
  } 
 
  console.log(result); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="col-xs-12" id="myFormTop"> 
  <div class="col-md-2 col-xs-12"> 
    <input class="form-control center" value="2"> 
  </div> 
 
  <div class="col-md-8 col-xs-12"> 
    <select class="select1 form-control"> 
      <option value="" selected="">sd</option> 
      <option value="glavnaya_stranitsa">Главная страница</option> 
      <option value="o_kompanii">О компании</option>                                             <option value="usloviya_vozvrata">Условия возврата</option> 
    </select> 
  </div> 
 
  <div class="col-xs-12"> 
    <button class="save btn btn-danger" id="top" type="button">Сохранить</button> 
  </div> 
</div>