Добавить input в форму при клике

263

19 апреля 2022, 12:00

Есть несколько блоков такого вида:

<div class="basket-option">
 <div class="basket-option-icon">
  <img src="/wp-content/themes/template/img/sauce.svg" alt="basket option">
 </div>
<div class="basket-option-title">Соус</div><div class="basket-option-count">
<div class="count">
  <button type="button" class="count-minus">-</button>
  <input type="text" value="0" id="qty">
   <button type="button" class="count-plus">+</button>
</div>
</div>
<div class="basket-option-price">Бесплатно</div>
</div>

Сейчас при клике по .count-minus и .count-plus меняется количество #qty, нужно сделать так что бы при изменении кол-ва, если оно больше 0 добавлять в форму #form-present имя и кол-во Если сделать так то каждый раз добавляется новые блоки input, а нужно что бы значения изменялись:

jQuery(".count-plus").click(function(){
     var dop_val_qty = jQuery(this).siblings("input").val();
     var dop_val_name = jQuery(this).parents(".basket-option-count").siblings(".basket-option-title").text();
     if (dop_val_qty > 0) {
        jQuery("#form-present").append('<input type="hidden" name="dop-name" id="dop-name" value="' + dop_val_name + '">');
        jQuery("#form-present").append('<input type="hidden" name="dop-qty" id="dop-qty" value="' + dop_val_qty + '">');
     }
     else {
        jQuery("#dop-name").remove();
        jQuery("#dop-qty").remove();
     }
        
    });

если делать html() а не append() другие блоки не учитываются

Answer 1

$('.count-minus, .count-plus').on('click', function(){
  let parent = $(this).closest('.basket-option'), // Получаем option
      count = Number(parent.find('.count-num').val()), // Получить значение
      name = parent.find('.basket-option-title').text().trim(); // получаем наименование
  // -------
  $(this).hasClass('count-plus') ? count++ : count--;
  parent.find('.count-num').val(count); // Меняем счётчик
  // -------
  if($(this).hasClass('count-plus') && count === 1) { // Если +1 товар, то
    $('#form-present') // В форму..
        .append('<input type="text" name="dop-name" id="dop-name" value="'+name+'">\
      <input type="text" name="dop-qty" id="dop-qty" value="'+count+'">'); // .. Добавляем инпуты с данными
  } else if($(this).hasClass('count-minus') && count === 0) { // если -1 товар
    $('#form-present') // То в форме..
        .find('#dop-name, #dop-qty') // .. находим добавленные инпуты..
        .remove(); // .. и удаляем их
  }
  // -------
  if(count > 0) { // Если товара больше нуля
    $('#form-present') // То в форме..
      .find('#dop-qty').val(count); // .. меняем значение товара
    // Советую дописать слушатель, который будет изменять значение выше, когда инпут .count-num редактируется вручную (не через "-" или "+")
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="basket-option">
  <div class="basket-option-icon">
    <img src="/wp-content/themes/template/img/sauce.svg" alt="basket option">
  </div>
  <div class="basket-option-title">Соус</div>
  <div class="basket-option-count">
    <div class="count">
      <button type="button" class="count-minus">-</button>
      <input class="count-num" type="text" value="0" id="qty">
      <button type="button" class="count-plus">+</button>
    </div>
  </div>
  <div class="basket-option-price">Бесплатно</div>
</div>
<div id="form-present"></div>