<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
</head>
<body>
<form id="form1" name="form">
<b> ширина:</b> <input id="shir1" type="text" value="5" /> <b>M<sup>2</sup></b>
<b> длина:</b> <input id="dlin1" type="text" value="5" /> <b>M<sup>2</sup></b>
<div class="calc-bgarea">
<b> Выберите тип:</b>
<input type="radio" id="color11" name="cena" value="12000" checked />Стандарт
<input type="radio" id="color12" name="cena" value="13000" />Цвет<br/>
<input type="radio" id="color13" name="cena" value="14000" />Стекляшки
<input type="radio" id="color14" name="cena" value="15000" />Плитка
<b> толщина</b>
<input type="radio" id="tolsh11" name="toshina" value="0" checked />30 мм
<input type="radio" id="tolsh12" name="toshina" value="1000" />40 мм<br/>
<input type="radio" id="tolsh13" name="toshina" value="2000" />60 мм
<input type="radio" id="tolsh14" name="toshina" value="5000" />80 мм
<b> Бортик </b>
<input type="radio" id="bort11" name="borti" value="0" checked />Без бортика
<input type="radio" id="bort12" name="borti" value="1000" /> С прямоугольным бортиком<br/>
<br/>
<input type="checkbox" value="2000" id="dost1" />
<label for="dost">Требуется доставка?</label>
<br/>
<input type="checkbox" value="5000" id="ust1" />
<label for="ust">Требуется установка?</label>
<br/>
</div>
<div class="calc-bg2">
Итого
</div>
<div class="calc-bgtotal">
Итого: <span id="result1">0</span> руб.<br>
</div>
</form>
<br><br><br><br>
<form id="form2" name="form">
<b> ширина:</b> <input id="shir2" type="text" name="shir2" value="5" /> <b>M<sup>2</sup></b>
<b> длина:</b> <input id="dlin2" type="text" name="dlin2" value="5" /> <b>M<sup>2</sup></b>
<b> ширина1:</b> <input id="shir201" type="text" name="shir201" value="5" /> <b>M<sup>2</sup></b>
<b> длина1:</b> <input id="dlin201" type="text" name="dlin201" value="5" /> <b>M<sup>2</sup></b>
<div class="calc-bgarea">
<b> Выберите тип:</b>
<input type="radio" id="color21" name="cena" value="12000" checked />Стандарт
<input type="radio" id="color22" name="cena" value="13000" />Цвет<br/>
<input type="radio" id="color23" name="cena" value="14000" />Стекляшки
<input type="radio" id="color24" name="cena" value="15000" />Плитка
<b> толщина</b>
<input type="radio" id="tolsh21" name="toshina" value="0" checked />30 мм
<input type="radio" id="tolsh22" name="toshina" value="1000" />40 мм<br/>
<input type="radio" id="tolsh23" name="toshina" value="2000" />60 мм
<input type="radio" id="tolsh24" name="toshina" value="5000" />80 мм
<b> Бортик </b>
<input type="radio" id="bort21" name="borti" value="0" checked />Без бортика
<input type="radio" id="bort22" name="borti" value="1000" /> С прямоугольным бортиком<br/>
<br/>
<input type="checkbox" value="2000" id="dost2" />
<label for="dost">Требуется доставка?</label>
<br/>
<input type="checkbox" value="5000" id="ust2" />
<label for="ust">Требуется установка?</label>
<br/>
</div>
<div class="calc-bg2">
Итого
</div>
<div class="calc-bgtotal">
Итого: <span id="result2">0</span> руб.<br>
</div>
</form>
<script>
function calc1() {
var d = document, price = tolshi = dostavka = ustanovka = bortik = 0;
shir1 = +d.getElementById("shir1").value,
dlin1 = +d.getElementById("dlin1").value,
sq = (shir1 * dlin1 / 1000000),
color1 = d.getElementById("color11"),
color2 = d.getElementById("color12"),
color3 = d.getElementById("color13"),
color4 = d.getElementById("color14"),
tolsh1 = d.getElementById("tolsh11"),
tolsh2 = d.getElementById("tolsh12"),
tolsh3 = d.getElementById("tolsh13"),
tolsh4 = d.getElementById("tolsh14"),
bort1 = d.getElementById("bort11"),
bort2 = d.getElementById("bort12"),
dost = d.getElementById("dost1"),
ust = d.getElementById("ust1"),
result = d.getElementById("result1");
// kol = d.getElementById("kol");
if (color1.checked) price = +color1.value;
if (color2.checked) price = +color2.value;
if (color3.checked) price = +color3.value;
if (color4.checked) price = +color4.value;
if (tolsh1.checked) tolshi = +tolsh1.value;
if (tolsh2.checked) tolshi = +tolsh2.value;
if (tolsh3.checked) tolshi = +tolsh3.value;
if (tolsh4.checked) tolshi = +tolsh4.value;
if (bort1.checked) bortik = +bort1.value;
if (bort2.checked) bortik = +bort2.value;
if (dost.checked) dostavka = +dost.value;
if (ust.checked) ustanovka = +ust.value
result.innerHTML = Math.round(sq * (price + tolshi) + dostavka + ustanovka + bortik* dlin1/1000);
};
function calc2() {
var d = document, price = tolshi = dostavka = ustanovka = bortik = 0;
shir1 = +d.getElementById("shir2").value,
dlin1 = +d.getElementById("dlin2").value,
shir2 = +d.getElementById("shir201").value,
dlin2 = +d.getElementById("dlin201").value,
sq = ((shir1 * dlin1 / 1000000) + (shir2 * dlin2 / 1000000) - (shir1 * shir2 / 1000000)),
color1 = d.getElementById("color21"),
color2 = d.getElementById("color22"),
color3 = d.getElementById("color23"),
color4 = d.getElementById("color24"),
tolsh1 = d.getElementById("tolsh21"),
tolsh2 = d.getElementById("tolsh22"),
tolsh3 = d.getElementById("tolsh23"),
tolsh4 = d.getElementById("tolsh24"),
bort1 = d.getElementById("bort21"),
bort2 = d.getElementById("bort22"),
dost = d.getElementById("dost2"),
ust = d.getElementById("ust2"),
result = d.getElementById("result2");
// kol = d.getElementById("kol");
if (color1.checked) price = +color1.value;
if (color2.checked) price = +color2.value;
if (color3.checked) price = +color3.value;
if (color4.checked) price = +color4.value;
if (tolsh1.checked) tolshi = +tolsh1.value;
if (tolsh2.checked) tolshi = +tolsh2.value;
if (tolsh3.checked) tolshi = +tolsh3.value;
if (tolsh4.checked) tolshi = +tolsh4.value;
if (bort1.checked) bortik = +bort1.value;
if (bort2.checked) bortik = +bort2.value;
if (dost.checked) dostavka = +dost.value;
if (ust.checked) ustanovka = +ust.value
result.innerHTML = Math.round(sq * (price + tolshi) + dostavka + ustanovka + bortik* dlin1/1000);
};
document.forms[0].onchange = calc1;
document.forms[1].onchange = calc2;
console.log(document.forms[0]);
console.log(document.forms[1]);
</script>
</body>
</html>