Получить результат сложения полей формы в процессе заполнения полей
Прошу помощи в решении реализации формы калькулятора услуг. Форма работает и сохраняет все необходимые данные в базу. Но мне бы хотелось предоставить пользователю результат сложения полей еще во время заполнения формы. Т.е. выбрал тариф, получил цену, указал количество рабочих мест, получил результат сложения тарифа и стоимости рабочих мест, добавил еще оборудование получил новую сумму. Понимаю, что реализация только через js, но так как я в нем чайник, прошу помощи гуру.
models.py:
class ITCalc(models.Model):
name = 'IT Аутсорсинг'
create_add = models.DateTimeField(auto_now_add=True, verbose_name='Дата создания')
fio = models.CharField(max_length=100, blank=True, verbose_name='ФИО заказчика')
company = models.CharField(max_length=100, blank=True, verbose_name='Фирма/Компания')
mail = models.EmailField(verbose_name='Почта заказчика')
phone = models.CharField(max_length=18, blank=True, verbose_name='Телефон заказчика')
tariff = models.ForeignKey(u'Tariff', null=True, on_delete=models.SET_NULL, related_name='itcalcs',
verbose_name='Тариф')
pc_count = models.IntegerField(default=1, blank=True, verbose_name='Количество компьютеров')
pc_summary = models.IntegerField(default=0, verbose_name='Компьютеры, стоимость в заказе')
mfu_count = models.IntegerField(default=0, blank=True, verbose_name='Количество МФУ')
mfu_summary = models.IntegerField(default=0, verbose_name='МФУ, стоимость в заказе')
routers_count = models.IntegerField(default=0, blank=True, verbose_name='Количество маршрутизаторов')
routers_summary = models.IntegerField(default=0, verbose_name='Маршрутизаторы, стоимость в заказе')
server_count = models.IntegerField(default=0, blank=True, verbose_name='Количество физических серверов')
server_summary = models.IntegerField(default=0, verbose_name='Физические серверы, стоимость в заказе')
vds_count = models.IntegerField(default=0, blank=True, verbose_name='Количество виртуальных серверов')
vds_summary = models.IntegerField(default=0, verbose_name='Виртуальные серверы, стоимость в заказе')
one_c_service = models.BooleanField(default=False, verbose_name='1С Предприятие')
databases = models.BooleanField(default=False, verbose_name='Базы данных для 1С')
summary = models.IntegerField(default=0, verbose_name='Общая сумма заказа')
class Meta:
verbose_name = 'АйТи запрос расчета'
verbose_name_plural = 'АйТи запросы расчета'
def __str__(self):
return self.name
forms.py (использую csrispy-forms):
class ITCalcForm(forms.ModelForm):
class Meta:
model = ITCalc
fields = ('tariff', 'pc_count', 'server_count', 'mfu_count', 'routers_count',
'vds_count', 'fio', 'mail', 'phone', 'fio', 'company')
views.py:
def itservice(request, pk):
page = get_object_or_404(Page, pk=pk)
title = page.name
short = Page.short
service = Page.objects.filter(name='IT Аутсорсинг')
image = Page.image
tariffs = Tariff.objects.all()
description1 = Page.description1
description2 = Page.description2
if request.method == 'POST':
calcform = ITCalcForm(request.POST)
if calcform.is_valid():
ITCalc = calcform.save(commit=False)
tariff = calcform.cleaned_data.get('tariff')
tariff_price = int(tariff.price)
pc = Item.objects.get(name="Компьютер")
pc_count = calcform.cleaned_data.get('pc_count')
if pc_count >= 10 and pc_count <= 24:
pc_price = pc.price - (pc.price / 100 * 10)
elif pc_count >= 25 and pc_count <= 49:
pc_price = pc.price - (pc.price / 100 * 15)
elif pc_count >= 50:
pc_price = pc.price - (pc.price / 100 * 20)
else:
pc_price = pc.price
ITCalc.pc_summary = pc_price * pc_count
pc_calc = ITCalc.pc_summary
mfu = Item.objects.get(name="МФУ")
mfu_price = mfu.price
mfu_count = calcform.cleaned_data.get('mfu_count')
ITCalc.mfu_summary = mfu_price * mfu_count
mfu_calc = ITCalc.mfu_summary
router = Item.objects.get(name="Роутер")
router_price = router.price
routers_count = calcform.cleaned_data.get('routers_count')
ITCalc.routers_summary = router_price * routers_count
routers_calc = ITCalc.routers_summary
server = Item.objects.get(name="Физический сервер")
server_price = server.price
server_count = calcform.cleaned_data.get('server_count')
ITCalc.server_summary = server_price * server_count
server_calc = ITCalc.server_summary
vds = Item.objects.get(name="Виртуальный сервер")
vds_price = vds.price
vds_count = calcform.cleaned_data.get('vds_count')
ITCalc.vds_summary = vds_price * vds_count
vds_calc = ITCalc.vds_summary
ITCalc.summary = tariff_price + pc_calc + mfu_calc + routers_calc + server_calc + vds_calc
ITCalc.save()
messages.success(request, 'Мы отправили на указанный вами почтовый адрес КП с расчетом.')
return redirect('/services/1/#calc')
else:
calcform = ITCalcForm()
return render(request, 'page.html', {'title': title, 'page': page, 'service': service, 'description1': description1,
'description2': description2, 'image': image, 'short': short,
'tariffs': tariffs, 'calcform': calcform})
Скрин формы (Поле сумма в теге h4 в который я бы хотел получать результат из ITCalc.summary):
Скрин результата в админке (на всякий случай):
html код формы:
<div class="card-body form">
<!-- Grid column -->
<div class="col-md-4">
<div class="md-form select-wrapper mdb-select b-0 md-outline">
<select name="tariff" class="select primary-color text-white form-control required text-right" id="form-contact-select" onchange="Selected(this)" required="">
<option value="" selected="">---------</option>
<option value="1">Онлайн</option>
<option value="2">Стандарт</option>
<option value="3">Бизнес</option>
</select>
<label for="form-contact-name" class="form-label select-label text-white active-primary">Тариф<strong><span class="sup text-white"> *</span></strong></label>
</div>
</div>
<!-- Grid column -->
<!-- Header -->
<div class="row">
<!-- Grid column -->
<div class="col-md-6" id="pc" style="display: block;">
<div class="md-form mb-0">
<input type="number" name="pc_count" value="0" class="numberinput form-control text-white" min="0" id="form-contact-pc_count">
<label for="form-contact-pc_count" class="form-label select-label text-white active">Сотрудники(компьютеры)</label>
</div>
</div>
<!-- Grid column -->
</div>
<div id="mfu_lan" class="row">
<!-- Grid column -->
<div class="col-md-6" id="mfu" style="display: block;">
<div class="md-form mb-0">
<input type="number" name="mfu_count" value="0" class="numberinput form-control text-white" min="0" id="form-contact-pc_count">
<label for="form-contact-mfu_count" class="form-label select-label text-white active">МФУ/Принтеры</label>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-6" id="lan" style="display: block;">
<div class="md-form mb-0">
<input type="number" name="routers_count" value="0" class="numberinput form-control text-white" min="0" id="form-contact-pc_count">
<label for="form-contact-mfu_count" class="form-label select-label text-white active">Маршрутизаторы(Роутеры)</label>
</div>
</div>
<!-- Grid column -->
</div>
<div id="servers" class="row">
<!-- Grid column -->
<div class="col-md-6" id="f_server" style="display: block;">
<div class="md-form mb-0">
<input type="number" name="server_count" value="0" class="numberinput form-control text-white" min="0" id="form-contact-pc_count">
<label for="form-contact-mfu_count" class="form-label select-label text-white active">Физические серверы</label>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-6" id="vds_server" style="display: block;">
<div class="md-form mb-0">
<input type="number" name="vds_count" value="0" class="numberinput form-control text-white" min="0" id="form-contact-pc_count">
<label for="form-contact-mfu_count" class="form-label select-label text-white active">Виртуальные серверы</label>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-6">
<div class="md-form mb-0">
<i class="fas fa-user prefix text-white"> </i>
<input type="text" name="fio" maxlength="100" class="textinput textInput form-control text-white required" id="form-contact-fio">
<label for="form-contact-fio" class="form-label select-label text-white">Ваше имя</label>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-6">
<div class="md-form text-white mb-0">
<i class="fas fa-landmark prefix text-white"> </i>
<input type="text" name="company" maxlength="100" class="textinput textInput form-control text-white" id="form-contact-company">
<label for="form-contact-company" class="text-white">Фирма/Компания</label>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-6">
<div class="md-form mb-0">
<i class="fas fa-envelope prefix text-white"> </i>
<input type="email" name="mail" maxlength="254" class="emailinput form-control text-white required" id="form-contact-email" required="">
<label for="form-contact-email" class="form-label select-label text-white">Ваша почта</label>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-6">
<div class="md-form text-white mb-0">
<i class="fas fa-phone prefix text-white"> </i>
<input type="text" name="phone" maxlength="18" class="textinput textInput form-control text-white" id="form-contact-phone">
<label for="form-contact-phone" class="text-white">Телефон для связи</label>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="row">
<div class="col-md-6 md-form text-white mb-0">
<h4 class="white-text font-weight-bold pt-4">Сумма: </h4>
<input type="number" name="summary" class="numberinput text-white" id="form-contact-summary">
</div>
<!-- Grid column -->
<div class="col-md-6">
<div class="md-form mb-0">
<button type="submit" class="btn btn-outline-light btn-rounded float-right waves-effect waves-light">
Получить расчет
</button>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>