object output in form input

145

27 июля 2019, 19:00

такая проблема:
Есть некий объект(собранный из данных со страницы)
Есть форма с инпутами, при клике они должны заполнятся(данными из объекта) но этого не происходит(событие на кнопку я не вешал интересует сам процесс записи в поля формы данных из объекта)

и еще проясните как работает $(element).val(function(index,[тут должна быть ф-ия но она не работает... или я не так передаю...]));

код прилагаю

//Алгоритм работы: 
//1) Жмем кнопочку add и поля сформированного объекта копируются в поля формы(input) 
//2)далее жмем еще раз add и поля объекта копируются/заполняются еще раз в поля формы() и так по кругу пока не заполним все значения из данных объекта сформированных из .showcase; 
var $showcase = $('.showcase'), 
  $form = $('.formOrder'); 
var $goods = $showcase.find('.item-goods'); 
var $name, $articul, $descr, $quantity; 
$arr = []; 
$goods.each(function(index, el) { 
  $name = $(el).find('.name').text(); 
  $articul = $(el).find('.articul').text(); 
  $descr = $(el).find('.descr').text(); 
  $quantity = $(el).find('.quantity').html()[0]; 
  if ($goods.length > 0) { 
    $arr.push({ 
      name: $name, 
      descr: $descr, 
      articul: $articul, 
      quantity: $quantity 
    }); 
  } 
}); 
//объект вывелся в консоли, как сделать чтобы вывод  первых двух полей 
//объекта выводился в input (планируется нажимать на кнопку add в .showcase) 
//и происходит заполнение input 
for (var key in $arr) { 
  console.log($arr[key]); 
} 
//пробывал так 
$form.find('input').each(function(index, el) { 
  //  $(el).val($arr[index].name); 
  //выводит или то или это а мне надо чтобы они выводились вместе 
  //кроме того если полей формы больше чем в полях объекта выводится ошибка 
  // свойство не может быть записано в поле вданном случае name не найдено 
  //  $(el).val($arr[index].articul); 
}); 
//пробывал и так 
for ($i = 0; $i < $arr.length; $i++) { 
  // $form.find('input').val($arr[$i].name); 
  //таже чушь 
  // $form.find('input').val($arr[$i].articul); 
} 
$form.find('input[name=goods_articul]').val($arr[0].name); 
$form.find('input[name=goods_quantity]').val($arr[0].articul); 
$form.find('input[name=goods_articul]').val($arr[1].name); 
$form.find('input[name=goods_quantity]').val($arr[1].articul); 
//не работает 
// for(i=0;i<$arr.length;i++){ 
//   $form.find('input[name=goods_articul]').val($arr[i].name); 
// $form.find('input[name=goods_quantity]').val($arr[i].articul); 
// $form.find('input[name=goods_articul]').val($arr[i].name); 
// $form.find('input[name=goods_quantity]').val($arr[i].articul); 
// } 
//Этот вариант вообще не сработал читал документацию ни черта не понял... во всяком случае чтобы работало: 
// $('.formOrder').find('input').each(function(index,el){ 
// 	$(el).val(function(index,findObj)); 
// })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<form class="formOrder out"> 
 
  <div class="wrap static st"> 
    <br /> 
    <!-- <input type="text" name="goods_name" placeholder="Название..." class="static" value=""> --> 
    <br /> 
    <input type="text" name="goods_articul" placeholder="Код..." class="static" value=""> 
    <br /> 
    <input type="text" name="goods_quantity" placeholder="Количество товара..." class="static" value=""> 
 
    <br /> 
    <input type="text" name="goods_articul" placeholder="Код..." class="static" value=""> 
    <br /> 
    <input type="text" name="goods_quantity" placeholder="Количество товара..." class="static" value=""> 
 
    <button class="delContent btn hidd" type="button">Удалить блок</button> 
  </div> 
  <div class="showcase"> 
    <div class="row"> 
      <div class="col-md-4"> 
        <div class="item-goods"> 
          <div class="name">good1</div> 
          <div class="descr">nice good</div> 
          <div class="articul">#34355</div> 
          <div class="quantity">1 <span>шт</span></div> 
          <div class="group-b"> 
            <button class="addFields btn">Add / <i class="fa fa-plus"></i></button> 
            <!-- <button>Like / <i class="fa fa-heart"></i></button> --> 
            <button>Del / <i class="fa fa-trash"></i></button> 
          </div> 
        </div> 
      </div> 
      <div class="col-md-4"> 
        <div class="item-goods"> 
          <div class="name">good2</div> 
          <div class="descr">very nice</div> 
          <div class="articul">#34356</div> 
          <div class="quantity">1 <span>шт</span></div> 
          <div class="group-b"> 
            <button class="addFields btn">Add / <i class="fa fa-plus"></i></button> 
            <!-- <button>Like / <i class="fa fa-heart"></i></button> --> 
            <button>Del / <i class="fa fa-trash"></i></button> 
          </div> 
        </div> 
      </div> 
      <div class="col-md-4"> 
        <div class="item-goods"> 
          <div class="name">good3</div> 
          <div class="descr">so good</div> 
          <div class="articul">#34357</div> 
          <div class="quantity">1 <span>шт</span></div> 
          <div class="group-b"> 
            <button class="addFields btn">Add / <i class="fa fa-plus"></i></button> 
            <!-- <button>Like / <i class="fa fa-heart"></i></button> --> 
            <button>Del / <i class="fa fa-trash"></i></button> 
          </div> 
        </div> 
      </div> 
    </div> 
 
 
  </div>

https://next.plnkr.co/edit/TOvWV0IOoc7SXG4L?preview

Answer 1

// Некий объект 
var values = { 
	input1: "text 1", 
	input2: "text 2", 
}; 
 
$("[name=input1]").val(values.input1); // Заполнили инпут по простому 
 
// Заполнили инпут перебирая объект 
for (var input in values) { 
	$("[name=" + input + "]").val(values[input]); 
} 
 
// судя по документации val с функцией используется скорее 
// всего для того чтобы не срабатывало событие change 
// для заполнения удобнее пользоваться другими методами 
$("form input").val(function (index, oldValue) { 
	return $.trim(oldValue); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<!-- форма с инпутами --> 
<form> 
  <input name="input1"/> 
  <input name="input2"/> 
</form>