Кнопка Добавить расчет

Question

Я студент колледжа (1-й год обучения), и в настоящее время я изучаю разработку веб-приложений с использованием PHP, MySQL и CodeIgniter, и мне удалось заполучить проект (разработанный кем-то другим - моя тетя там работает менеджером) для компании, которая делает деревянные двери. Приложение используется для добавления / управления заказами, пока я возился, мне удалось внести некоторые изменения (в зависимости от того, что они хотели добавить) с успехом, но теперь я застрял

Приложение работает так:

1) пользователь заходит на страницу, чтобы добавить новый заказ

2) выбирает высоту двери (из выпадающего меню)

3) выбирает ширину двери (из выпадающего меню)

4) выбирает корпус двери (из выпадающего меню)

После этого пользователь печатает заказ и, наконец, производит расчеты на основе выбранных вариантов и добавляет их вручную на распечатанную страницу.

Теперь я пытаюсь после 4-го шага добавить на страницу кнопку, на которой пользователь щелкнет по ней, и появится окно, показывающее ему расчеты без необходимости делать это самостоятельно.

Я пытался посмотреть на Google и других форумах, но не смог найти решение

Вот код для раскрытия высоты

<select id="ipsos" onchange="ypsos();" name="onom_ypsos" class="form-control onom_ypsos" required >
<option value="" ></option>
<option value="205" class="ypsosplatos_12" >205</option>
<option value="210" class="ypsosplatos_12" >210</option>    
<option value="215" class="ypsosplatos_12" >215</option>
<option value="202" class="ypsosplatos_15" >202</option>
<option value="207" class="ypsosplatos_15" >207</option>
<option value="212" class="ypsosplatos_15" >212</option>
<option value="217" class="ypsosplatos_15" >217</option>
<option value="221" class="ypsosplatos_15" >221</option>
<option value="200" class="ypsosplatos_16" >200</option>
<option value="204" class="ypsosplatos_16" >204</option>
<option value="208" class="ypsosplatos_16" >208</option>    
<option value="212" class="ypsosplatos_16" >212</option>
<option value="216" class="ypsosplatos_16" >216</option>
<option value="220" class="ypsosplatos_16" >220</option>
<option value="224" class="ypsosplatos_16" >224</option>
<option value="228" class="ypsosplatos_16" >228</option>
<option value="232" class="ypsosplatos_16" >232</option>
<option value="236" class="ypsosplatos_16" >236</option>
<option value="240" class="ypsosplatos_16" >240</option>
<option value="244" class="ypsosplatos_16" >244</option>
<option value="248" class="ypsosplatos_16" >248</option>
<option value="252" class="ypsosplatos_16" >252</option>
</select>

Вот код для раскрывающегося списка ширины

<select onchange="platos(this.value);" name="onom_platos" class="form-control onom_platos" required>
<option value="" ></option>
<option value="90" class="ypsosplatos_12">90</option>
<option value="95" class="ypsosplatos_12" >95</option>  
<option value="100" class="ypsosplatos_12">100</option>
<option value="80" class="ypsosplatos_15" >80</option>
<option value="85" class="ypsosplatos_15" >85</option>
<option value="90" class="ypsosplatos_15" >90</option>
<option value="95" class="ypsosplatos_15" >95</option>
<option value="100" class="ypsosplatos_15" >100</option>
<option value="105" class="ypsosplatos_15" >105</option>
<option value="83" class="ypsosplatos_16" >83</option>
<option value="88" class="ypsosplatos_16" >88</option>
<option value="93"  class="ypsosplatos_16" >93</option> 
<option value="98"  class="ypsosplatos_16" >98</option>
<option value="103"  class="ypsosplatos_16" >103</option>
<option value="108"  class="ypsosplatos_16" >108</option>
<option value="113"  class="ypsosplatos_16" >113</option>
<option value="118"  class="ypsosplatos_16" >118</option>
<option value="123"  class="ypsosplatos_16" >123</option>
<option value="128"  class="ypsosplatos_16" >128</option>
</select>

Я не ищу, чтобы вы, ребята, давали код или решали его для меня, я просто хочу получить руководство, где мне следует искать - что читать. Заранее спасибо, и извините, если это не по теме или нарушает сообщество

Answer 1

Может как то так? Обратите внимание, что я дал идентификатор для 2-го выпадающего списка для облегчения доступа к JS.

<select id="ipsos" onchange="ypsos();" name="onom_ypsos" class="form-control onom_ypsos" required >
<option value="" ></option>
<option value="205" class="ypsosplatos_12" >205</option>
<option value="210" class="ypsosplatos_12" >210</option>    
<option value="215" class="ypsosplatos_12" >215</option>
<option value="202" class="ypsosplatos_15" >202</option>
<option value="207" class="ypsosplatos_15" >207</option>
<option value="212" class="ypsosplatos_15" >212</option>
</select>
<select id="width" onchange="platos(this.value);" name="onom_platos" class="form-control onom_platos" required>
<option value="" ></option>
<option value="90" class="ypsosplatos_12">90</option>
<option value="95" class="ypsosplatos_12" >95</option>  
<option value="100" class="ypsosplatos_12">100</option>
</select>
<button onclick="calc()">calc</button>
<script>
function calc(){
var val1 = document.getElementById("ipsos").value;
var val2 = document.getElementById("width").value;

alert("val1 * val2 = " + (val1*val2));
}
</script>