I have a task of converting a Google Sheets document that gathers various data inputs from users and performs multiple calculations. My goal is to transform it into a webpage connected to an SQL database.
To manipulate the calculable data on the webpage, I am utilizing jquery, and my knowledge of SQL is solid.
While I worked with Javascript in the past, it has been a while, and I could use a refresher.
I have set up a table with 5 rows for capturing the square footage (SF) of three different types of spaces.
Space Type involves a drop-down menu,
Floor Area is an <input> number field for user input,
% Area is calculated as (Floor Area ÷ Total Area).
If the field requires a numeric value, should I use
$("#floor-area-1").val()/$("#total-area").val()Could employing .text() be a viable option as suggested by someone?
I intend to populate the innerHTML of DIV elements with the calculation results, e.g.,
$("#floor-area-1").val()/$("#total-area").val()The remaining sections consist of DIVs where the respective calculations will be displayed in their designated columns.
<!-- Row 1 -->
<div class="div-table-row">
<div class="div-table-col" style="width:15%;">
<select id="space-type-1" name="space-type-1">
<option value="Education"> Education </option>
<option value="Food sales"> Food sales </option>
<option value="Food service"> Food service </option>
<option value="Health care"> Health care </option>
<option value="Inpatient"> Inpatient </option>
<option value="Outpatient"> Outpatient </option>
<option value="Lodging"> Lodging </option>
<option value="Mercantile"> Mercantile </option>
<option value="Retail-1"> Retail <span style="font-size:8px;">(no mall)</span> </option>
<option value="Retail-2"> Retail <span style="font-size:8px;">(malls)</span> </option>
<option value="Office"> Office </option>
<option value="Public assembly"> Public assembly </option>
<option value="Public safety"> Public safety </option>
<option value="Religious worship"> Religious worship </option>
<option value="Service"> Service </option>
<option value="Storage"> Storage </option>
<option value="Warehouse"> Warehouse </option>
<option value="Other"> Other </option>
<option value="Vacant"> Vacant </option>
</select>
</div>
<div class="div-table-col div-table-col-disp" style="width:13%;">
<input class="input-floor-area" type="number" name="floor-area-1" size="13">
</div>
<div id="kwh-used" class="div-table-col div-table-col-calc"
style="width:10%;border-right-color: #000;">
</div>
<div id="kwh-cost" class="div-table-col div-table-col-calc" style="width:15%;border-right-color: #000;">
</div>
</div>
% Area represents the floor area percentage of the respective space displayed in that row's cell.
kWh Used takes a value associated with a particular Space Type and multiplies it by the Floor Area, for example, Office = 21 kWh x 20,000 SF will result in 420,000 kWh used appearing in the column under kWh Used in row 1.
In the past, I have utilized document.getElementById(). However, working with jquery syntax may be somewhat different. If anyone knows of any online resources showcasing examples, please direct me towards them, and I believe I can navigate my way through this challenge.
My primary query is how do I capture the text in Space Type and Floor Area and display the results of %Area? Once I comprehend this step, I feel confident about tackling the subsequent tasks.
-----------+------------+--------+----------+----------
Space Type | Floor Area | % Area | kWh Used | kWh Cost
-----------+------------+--------+----------+----------
Office | 20,000 | 12% | 50,000 | $5,000
-----------+------------+--------+----------+----------
Hotel | 150,000 | 87% | 120,000 | $12,000
-----------+------------+--------+----------+----------
Retail | 2,000 | 1% | 19,000 | $1,900
-----------+------------+--------+----------+----------
Total | 100% | 241,000 | $18,900
-----------+------------+--------+----------+----------
Testing the following code isn't triggering the alert() function.<br>
$( "#floor-area-1" ).on( "blur", function() {
alert( "Handler for `blur` called." );
} );