For now, I have set up all the input of the form to enter a value to calculate the price, now a change is needed, there are fields that are not required to calculate the price from the required fields, and now how to do it, if I do not enter anything in In the optional fields, I will only calculate the price from the required ones, and if I enter additional values in the optional fields, it will add value to the price.
Thanks for your help and tips.
HTML and JS
<main class="calc">
<h2 class="calc__title">Kalkulator druku na szkle</h2>
<form class="calc__form">
<fieldset class="calc__form-row">
<legend class="calc__form-title required">Wymiary szkła w (cm)</legend>
<input class="calc__form-input calc__form-input--1 validation-js" type="number" min="1" id="glass_x" placeholder="szerokość (cm)">
<span class="calc__form-x">x</span>
<input class="calc__form-input calc__form-input--2 validation-js" type="number" min="1" id="glass_y" placeholder="wysokość (cm)">
</fieldset>
<div data-error></div>
<fieldset class="calc__form-row">
<label class="calc__form-label required" for="glass_type">Rodzaj szkła</label>
<div class="calc__form-wrap">
<select id="glass_type" class="calc__form-select validation-js">
<option class="calc__form-option calc__form-option--choose" value="" hidden>wybierz</option>
<option class="calc__form-option" value="4mm-sh">4 mm szklo hartowane</option>
<option class="calc__form-option" value="4mm-ow">4 mm opti white</option>
<option class="calc__form-option" value="6mm-sh">6 mm szklo hartowane</option>
<option class="calc__form-option" value="6mm-ow">6 mm opti white</option>
</select>
</div>
</fieldset>
<div data-error></div>
<fieldset class="calc__form-row">
<label class="calc__form-label required" for="print_type">Rodzaj druku</label>
<div class="calc__form-wrap">
<select id="print_type" class="calc__form-select validation-js">
<option class="calc__form-option calc__form-option--choose" value="" hidden>wybierz</option>
<option class="calc__form-option" value="cmyk">Tradycyjny</option>
<option class="calc__form-option" value="cmyk_w">Z kolorem białym</option>
<option class="calc__form-option" value="cmyk_2x">Do podświetleń</option>
</select>
</div>
</fieldset>
<div data-error></div>
<fieldset class="calc__form-row">
<legend class="calc__form-title">Otwory montażowe</legend>
<input class="calc__form-input calc__form-input--3 validation-js" type="number" min="0" id="hole_count" placeholder="wpisać ilość">
<input class="calc__form-input calc__form-input--4 validation-js" type="number" min="0" id="hole_size" placeholder="średnica mm">
</fieldset>
<div data-error></div>
<fieldset class="calc__form-row">
<label class="calc__form-label" for="hole_socket">Otwory na gniazda <span class="calc__form-label--color">(Ø 68 mm)</span></label>
<input class="calc__form-input calc__form-input--5" type="number" min="0" id="hole_socket" placeholder="wpisać ilość">
</fieldset>
<div data-error></div>
<fieldset class="calc__form-row">
<input class="calc__form-input calc__form-input--6 validation-js" type="checkbox" id="glass_edge_grinding"> Szlif krawędzi
</fieldset>
<div data-error></div>
<div class="calc__form-price"><span class="calc__form-price--total"></span></div>
<div class="calc__form-buttons">
<button class="calc__form-btn calc__form-btn--1">Zamawiam</button>
<button class="calc__form-btn calc__form-btn--2">Mam pytania</button>
</div>
</form>
<div class="contact">
<form class="contact-form">
<div class="contact-form__row">
<label class="contact-form__label required" for="">Adres email</label>
<input class="contact-form__input" type="text" placeholder="Wprowadź adres">
</div>
<div class="contact-form__row">
<label class="contact-form__label" for="">Telefon</label>
<input class="contact-form__input" type="text" placeholder="Wprowadź numer">
</div>
<button class="contact-form__btn">Wyślij</button>
</form>
</div>
</main>
let price = 0;
const $price = document.querySelector('.calc__form-price--total ');
$price.innerHTML= price + " zł";
const prices = {
glass_type : {
"none" : 0,
"4mm-sh" : 95,
"4mm-ow" : 145,
"6mm-sh" : 135,
"6mm-ow" : 205
},
print_type : {
"none" : 0,
"cmyk" : 40,
"cmyk_w" : 60,
"cmyk_2x" : 80
},
hole_size : {
"6-10" : 9,
"11-30" : 18,
"31-50" : 21
},
hole_socket : 36,
glass_edge_grinding : 12
}
// stan formularza
const state = {
glass_x : 0,
glass_y : 0,
glass_type : false,
print_type : false,
hole_count : 0,
hole_size : 0,
hole_socket : 0,
glass_edge_grinding : false
}
// wyliczam sume
function sum() {
const valid = Array.from(inputs).filter(node => node.value.trim());
if (valid.length === inputs.length) {
// let glassPrice = prices.glass_type[state.glass_type];
// let printPrice = prices.print_type[state.print_type];
let glassPrice = prices.glass_type[state.glass_type] ? prices.glass_type[state.glass_type] : prices.glass_type["none"];
let printPrice = prices.print_type[state.print_type] ? prices.print_type[state.print_type] : prices.print_type["none"];
let sum_part1 = ((state.glass_x * state.glass_y / 1000) * (glassPrice + printPrice))
let holeSizePrice = 0;
if (state.hole_size < 11)
holeSizePrice = prices.hole_size["6-10"];
if (state.hole_size >= 11 && state.hole_size <= 30)
holeSizePrice = prices.hole_size["11-30"];
if (state.hole_size > 31)
holeSizePrice = prices.hole_size["31-50"];
let sum_part2 = state.hole_count * holeSizePrice;
let sum_part3 = state.hole_socket * prices.hole_socket;
const glassEdgeGrinding = state.glass_edge_grinding ? prices.glass_edge_grinding : 0;
let sum_part4 = 2 * (state.glass_x + state.glass_y / 100) * glassEdgeGrinding;
const sum = sum_part1 + sum_part2 + sum_part3 + sum_part4;
console.log(sum.toFixed(2));
$price.innerHTML = sum.toFixed(2) + " zł";
console.log(state);
}
}
const form = document.querySelector("form");
const inputs = document.querySelectorAll('.validation-js');
inputs.forEach(el => {
if (el.tagName === "SELECT") {
el.addEventListener("change", e => {
state[el.id] = el.value;
sum();
})
}
if (el.tagName === "INPUT" && ["number"].includes(el.type)) {
el.addEventListener("input", e => {
state[el.id] = +el.value || 0;
sum();
})
}
if (el.tagName === "INPUT" && ["checkbox"].includes(el.type)) {
el.addEventListener("change", e => {
state[el.id] = el.checked;
sum();
})
}
})
Codepen: https://codepen.io/mary_pieroszkiewicz/full/BaQrWrX
