[laimas]

Это мне для университета

А что так плохо учимся, не изучаем материал? )

Я не знаю что там думают в университетах, но вы разрабатываете проект для реального магазина. А это означает, что вы должны продумывать все, включая и вопросы проектирования базы данных, без нее магазина не будет. А разработчик думающий ни за что не будет описывать данные в базе так, как вы при думали. С чем это связано я говорил. Сервер с клиентом, это одна связка, если каждый будет сам по себе, один другому будут отдавать данные под чем угодно выдуманным, то второму придется попотеть разбирая их. У вас уже есть ошибка - два поля формы отвечающие за разное имеют одно и тоже имя - name="num". При этом поля списков их не имеют, а только идентификаторы, которые в общем то здесь не нужны.

Лишнее удалено из полей, добавлено нужное. Данные для расчета содержатся в полях формы (защищая проект обосновывайте почему).

Это форма:

<form autocomplete="off" id="calc">
<div class="form-group" style="margin-bottom: 15px;"> 
<label>Размер страницы</label> 
<select name="size" class="form-control"> 
    <option selected value="" disabled>Выберите размер страницы</option> 
    <option value="A4" data-price="4.15">A4(205*202мм)</option> 
    <option value="A5" data-price="4">A5(145*200мм)</option> 
    <option value="A6" data-price="3.10">A6(100*140мм)</option> 
    <option value="gen" data-price="2.15">Формат(200*200мм)</option> 
</select>
</div> 

<div class="form-group" style="margin-bottom: 15px;"> 
<label>Цвет страниц</label> 
<select name="color" class="form-control"> 
    <option selected value="" disabled>Выберите цвет страниц</option> 
    <option value="bw" data-price="1.20">Черно-белые</option> 
    <option value="col" data-price="2.45">Цветные</option> 
</select> 
</div>

<div class="form-group" style="margin-bottom: 15px;"> 
<label>Количество разворотов</label> 
    <input class="form-control" type="number" name="turn" size="3" min="1" value="1"> 
</select> 
</div>

<div class="form-group" style="margin-bottom: 15px;"> 
<label>Вид обложки</label> 
<select name="cover" class="form-control"> 
    <option selected value="" disabled>Выберите вид обложки</option> 
    <option value="bw" data-price="10">Черно-белая</option> 
    <option value="col" data-price="12">Цветная</option> 
    <option value="sk" data-price="16">Под кожу с тиснением</option> 
    <option value="lam" data-price="21.20">Ламинация</option> 
</select> 
</div>

<div class="form-group" style="margin-bottom: 15px;"> 
<label>Переплет</label> 
<select name="binding" class="form-control"> 
    <option selected value="" disabled>Выберите переплет</option> 
    <option value="soft" data-price="14">Мягкий</option> 
    <option value="solid" data-price="21">Твердый</option> 
    <option value="staples" data-price="12">Сшить скобами</option> 
    <option value="spring" data-price="32">Пружина</option> 
</select> 
</div>

<div class="form-group" style="margin-bottom: 15px;"> 
<label>Тираж</label> 
    <input class="form-control" type="number" name="circulat" size="10" min="1" value="1"> 
</div> 
</select> 
</div>

<div class="form-group" style="margin-bottom: 15px;"> 
<input type="button" id="calculate" value="Посчитать"> 
</div>
<div class="form-group" style="margin-bottom: 15px;"> 
<label>Cтоимость :</label> 
<output id="total"></output>
</form>

Вообще-то формы для заказа, а попутно и рассчитать, а значит форма должна отправляться, у вас этого нет. Хотя что подразумевается под магазином в вашем случае не знаю, чего вы там планируете.

Скриптов два - первый вариант, это автоматический просчет при выборе в полях формы (кнопка Посчитать не нужна), второй выбором по кнопке Посчитать.

document.addEventListener("DOMContentLoaded", function() {
    document.querySelector('#calc').addEventListener("change", function() {
        var size =  this.elements.namedItem('size'),
            color = this.elements.namedItem('color'),
            cover = this.elements.namedItem('cover'),
            binding = this.elements.namedItem('binding'),
            result = this.elements.namedItem('total');
            
        result.value = ""; //очистить поле расчета 
        
        if(!size.value || !color.value || !cover.value || !binding.value) return; //если нет выбора в списках
        
        result.value = ((
            parseFloat(size.options[size.selectedIndex].attributes['data-price'].value) 
            * 
            this.elements.namedItem('turn').valueAsNumber 
            +
            parseFloat(color.options[color.selectedIndex].attributes['data-price'].value) 
            + 
            parseFloat(cover.options[cover.selectedIndex].attributes['data-price'].value) 
            +
            parseFloat(binding.options[binding.selectedIndex].attributes['data-price'].value)
        ) * this.elements.namedItem('circulat').valueAsNumber).toFixed(2);
    });
});

document.addEventListener("DOMContentLoaded", function() {
    document.querySelector('#calc').addEventListener("change", function() {
        document.querySelector('#total').value = ""; //очистить поле расчета
    });
    
    document.querySelector('#calculate').addEventListener("click", function() {
        var fields = document.querySelector('#calc').elements,
            size =  fields.namedItem('size'),
            color = fields.namedItem('color'),
            cover = fields.namedItem('cover'),
            binding = fields.namedItem('binding'),
            result = fields.namedItem('total');
            
        if(!size.value || !color.value || !cover.value || !binding.value) { //если нет выбора в списках
            alert("Не во всех полях формы сделан выбор!");
            return;     
        }
        
        result.value = ((
            parseFloat(size.options[size.selectedIndex].attributes['data-price'].value) 
            * 
            fields.namedItem('turn').valueAsNumber 
            +
            parseFloat(color.options[color.selectedIndex].attributes['data-price'].value) 
            + 
            parseFloat(cover.options[cover.selectedIndex].attributes['data-price'].value) 
            +
            parseFloat(binding.options[binding.selectedIndex].attributes['data-price'].value)
        ) * fields.namedItem('circulat').valueAsNumber).toFixed(2);
    });
});