添加计算按钮

Question

i am a college student (1st year) and currently i am studying web app developement with PHP and MySQL and CodeIgniter, and i managed to get my hands on a project (developed by someone else-my aunt is a manager there) for a company that makes wooden doors. The app is used to add/manage orders, while messing around i managed to make some changes (based on what they wanted to add) with success but now i am stuck

The app works like this :

1) the user enters the page to add a new order

2) selects the height of the door (from a dropdown menu)

3) selects the width of the door (from a dropdown menu)

4) selects the casing of the door (from a dropdown menu)

After that the user prints the order and finally makes calculations based on the selections and adds them manually on the printed page.

Now what i am trying to do is after the 4th step to add a button on the page where the user will click it and will pop up a window showing him the calculations whitout him needing to do it by himself.

I tried looking on google and other forums but havent managed to find a sollution

Here's the code for the dropdown of the height

<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>

Here's the code for the dropdown of the width

<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>

I am not looking for you guys to give the code or to solve it for me, i just want some guidance where should i be looking at - what to read. Thanks in advance, and sorry if it is out of topic or violates the community

Answer 1

Maybe something like this? Note that i gave an ID to the 2nd Dropdown for easier js access.

<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>