Передать значение value из input в data-quantity на кнопку

408
18 ноября 2017, 12:59

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

<form action="/?add-to-cart=30" class="cart new" method="post" enctype="multipart/form-data">   <div class="quantity">
    <label class="screen-reader-text" for="quantity_5a0ea7cc0e93b">Количество</label>
    <input type="number" id="quantity_5a0ea7cc0e93b" class="input-text qty text" step="1" min="0" max="" name="quantity" value="1" title="Кол-во" size="4" pattern="[0-9]*" inputmode="numeric">
</div>
<a rel="nofollow" href="/?add-to-cart=30" data-quantity="1" data-product_id="30" data-product_sku="" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Купить</a>

как передать значение value из input в data-quantity на кнопку?

Answer 1

/*захватываем  элементы*/ 
var input = document.getElementById('quantity_5a0ea7cc0e93b'); 
var a = document.getElementsByTagName('a'); 
/* задаем обработчик события  Input*/ 
input.addEventListener('input', function() { 
  /*  и при каждом клике меняем значение атрибута а  data-quantity на значение inputa*/ 
  a[0].setAttribute('data-quantity', input.value); 
 
  /* а консоль для наглядности, что работает можно удалить*/ 
  console.log(a[0].getAttribute('data-quantity')) 
})
<form action="/?add-to-cart=30" class="cart new" method="post" enctype="multipart/form-data"> 
  <div class="quantity"> 
    <label class="screen-reader-text" for="quantity_5a0ea7cc0e93b">Количество</label> 
    <input type="number" id="quantity_5a0ea7cc0e93b" class="input-text qty text" step="1" min="0" max="" name="quantity" value="1" title="Кол-во" size="4" pattern="[0-9]*" inputmode="numeric"> 
  </div> 
  <a rel="nofollow" href="/?add-to-cart=30" data-quantity="1" data-product_id="30" data-product_sku="" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Купить</a>

Answer 2

Получаете инпут const input = document.getElementById('quantity_5a0ea7cc0e93b'), далее вам надо повесить обработчик на инпут input.addEventListener('input', (e) => { document.getElementsByClassName('product_type_simple')[0].setAttribute('data-quantity', e.target.value) })

READ ALSO
Изменение стиля при наведении [дубликат]

Изменение стиля при наведении [дубликат]

На данный вопрос уже ответили:

339
Node JS как достать функцию из другого файла js

Node JS как достать функцию из другого файла js

Пишу код на Node JS и столкнулся с проблемой

255
setInterval toggleClass jQuery, что-то пошло не так

setInterval toggleClass jQuery, что-то пошло не так

Наверное из-за такой структуры не могу понять, почему неправильно работает, класс добавляется произвольно и не на 1 сек, как будто сходит с умаПодскажите,...

318
Как выводить записи в JSON по убыванию?

Как выводить записи в JSON по убыванию?

Нужно чтобы записи прилетали по убыванию(скрин 1) Те

197