Что сделать чтобы скрипт пересчитывал значение суммы в каждой форме, а не только в первой?
Делаю лэнд. Есть 8 одинаковых форм отправки для каждого товара. Ознакомится можно здесь http://prots.pro/portfolio/roses/
<form class="rose-form8 rose-form form">
<!-- Hidden Required Fields -->
<input type="hidden" class="rosename" name="rosename" value="">
<input type="hidden" name="utm_source" value="">
<input type="hidden" name="utm_content" value="">
<input type="hidden" name="utm_campaign" value="">
<input type="hidden" name="utm_term" value="">
<input type="hidden" name="utm_medium" value="">
<div class="form__wrapper">
<div class="form__title">
Ваш заказ:
</div>
<div class="cart__item">
<div class="cart__item-img">
<img src="./images/catalog-img-8.jpg" alt="">
<div class="cart__item-name">
Роза в колбе "King" Синяя
</div>
</div>
<div class="number">
<span class="minus">-</span>
<input class="count-input" name="count__input" type="text" value="1"/>
<span class="plus">+</span>
</div>
<div class="cart__item-price" data-price="3100">
3100 ₽
</div>
</div>
<div class="allcart__price">
Сумма: <input readonly name="summ__input" type="text">₽
</div>
<div class="form__inner">
<div class="input__wrapper">
<div class="input__title">
Ваше Имя:
</div>
<input type="text" name='name' class="text__input" placeholder="Ольга" required>
</div>
<div class="input__wrapper">
<div class="input__title">
Ваш телефон:
</div>
<input type="tel" name="tel" class="phone__input" placeholder="+7(999) 999-99-99" required>
</div>
<div class="input__wrapper">
<div class="select">
<select name="select__grav">
<option>Выбрать гравировку</option>
<option value="С Любовью...">С Любовью...</option>
<option value="Я Тебя Люблю!">Я Тебя Люблю!</option>
<option value="Ты Мой Ангел...">Ты Мой Ангел...</option>
<option value="Любимой Маме!">Любимой Маме!</option>
<option value="Ты Прекрасна!">Ты Прекрасна!</option>
<option value="Любимой Дочери!">Любимой Дочери!</option>
<option value="С Юбилеем!">С Юбилеем!</option>
<option value="Моей Принцессе!">Моей Принцессе!</option>
<option value="Самой Лучшей Маме!">Самой Лучшей Маме!</option>
<option value="С Днём Рождения!">С Днём Рождения!</option>
<option value="В Наш День...">В Наш День...</option>
<option value="Любимой Подруге!">Любимой Подруге!</option>
<option value="Самой Милой">Самой Милой</option>
<option value="Красавице От Чудовища">Красавице От Чудовища</option>
<option value="Любимой Супруге">Любимой Супруге</option>
<option value="Любимой Сестре!">Любимой Сестре!</option>
<option value="Ты Моё Всё!">Ты Моё Всё!</option>
<option value="Любимой Бабуле!">Любимой Бабуле!</option>
<option value="Моё Сердце Навеки Твоё!">Моё Сердце Навеки Твоё!</option>
<option value="Самой Родной С Любовью!">Самой Родной С Любовью!</option>
</select>
<div class="select__arrow"></div>
</div>
</div>
<div class="input__wrapper">
<input type="text" name="address" class="text__input" placeholder="Адрес доставки" required>
</div>
<div class="input__wrapper">
<div class="select">
<select name="select__box">
<option>Добавить WOW коробку 600 руб</option>
<option value="Да">Да</option>
<option value="Нет">Нет</option>
</select>
<div class="select__arrow"></div>
</div>
</div>
<div class="input__wrapper">
<label class="input-cb">Я даю согласие на обработку персональных данных
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
</div>
<button class="form__button btn" type="submit">Заказать звонок</button>
<div class="close__btn"></div>
</div>
</form>
Такой обработчик count input
$(document).ready(function() {
$('.minus').click(function () {
var $input = $(this).parent().find('input');
var count = parseInt($input.val()) - 1;
count = count < 1 ? 1 : count;
$input.val(count);
$input.change();
return false;
});
$('.plus').click(function () {
var $input = $(this).parent().find('input');
$input.val(parseInt($input.val()) + 1);
$input.change();
return false;
});
});
И вот такой js обработчик пересчета суммы(количество из +- инпута умножить на цену одной единицы товара из data-price).
$('.count-input').on('change', function(){
let summ = $('.count-input').val() * $('.cart__item-price').data('price');
$('.allcart__price input').val(summ);
$('.allcart__price input').attr('value', summ);
});
let summ = $('.count-input').val() * $('.cart__item-price').data('price');
$('.allcart__price input').val(summ);
$('.allcart__price input').attr('value', summ);
Сейчас при открытии первой формы все работает ок, берется сумма из data-price умножается на число из count инпута и передается в .allcart__price input и в его value. Но это работает только для первой формы, во всех последующих формах пересчета не происходит вовсе. Что поменять чтобы этот пересчет значения сумы товара и его количества работал для каждой формы отдельно? Буду благодарен за помощь!
Ответы (1 шт):
Автор решения: fortavey
→ Ссылка
$('.count-input').on('change', function(){
let summ = parseInt($(this).val()) * parseInt($(this).closest('form.rose-form8').find('.cart__item-price').data('price'));
$(this).closest('form.rose-form8').find('.allcart__price input').val(summ);
$(this).closest('form.rose-form8').find('.allcart__price input').attr('value', summ);
});