Databases
StackOverflow2013
Postsdbo
PODisplay SubTotal and Total at the same time - Javascript
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODisplay SubTotal and Total at the same time - Javascript
    primarykey
    data
    text
    <p>I'm new to Javasript and found the javascript code I used below from another source which I modified. I'm trying to display the subtotal on the third column for each benefit while displaying the total of the entire form. I'm having difficulty in displaying the Subtotal. Here's my code. Any help from you will be very much appreciated. Thank you!</p> <pre><code>&lt;table cellpadding="5" cellspacing="3" style="font-size:10px;color: #1666AF; line-height:2.1;" width="280"&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td width="60%"&gt;&lt;span style="color: #DF2727; font-weight:bold;"&gt;Benefits&lt;/span&gt;&lt;/td&gt; &lt;td width="20%" align="center" &gt;&lt;span style="color: #DF2727; font-weight:bold;"&gt;Qty&lt;/span&gt;&lt;/td&gt; &lt;td width="20%"&gt;&lt;span style="color: #DF2727; font-weight:bold;"&gt;Savings&lt;/span&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Benefit 1&lt;/td&gt; &lt;td align="center"&gt; &lt;select id="qty" name="BENE_1_800" onchange="CalculateEstimatedSavings(this.form)" &gt; &lt;option value="0"&gt;0&lt;/option&gt; &lt;option value="1"&gt;1&lt;/option&gt; &lt;option value="2"&gt;2&lt;/option&gt; &lt;option value="3"&gt;3&lt;/option&gt; &lt;option value="4"&gt;4&lt;/option&gt; &lt;option value="5"&gt;5&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;td align="left"&gt;&lt;span id="order_subtotal_1"&gt;$0.00&lt;/span&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Benefit 2&lt;/td&gt; &lt;td align="center"&gt;&lt;select id="qty" name="BENE_2_266" onchange="CalculateEstimatedSavings(this.form)" &gt; &lt;option value="0"&gt;0&lt;/option&gt; &lt;option value="1"&gt;1&lt;/option&gt; &lt;option value="2"&gt;2&lt;/option&gt; &lt;option value="3"&gt;3&lt;/option&gt; &lt;option value="4"&gt;4&lt;/option&gt; &lt;option value="5"&gt;5&lt;/option&gt; &lt;/select&gt; &lt;td align="left"&gt;&lt;span id="order_subtotal_2"&gt;$0.00&lt;/span&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Benefit 3&lt;/td&gt; &lt;td align="center"&gt;&lt;select id="qty" name="BENE_3_100" onchange="CalculateEstimatedSavings(this.form)" &gt; &lt;option value="0"&gt;0&lt;/option&gt; &lt;option value="1"&gt;1&lt;/option&gt; &lt;option value="2"&gt;2&lt;/option&gt; &lt;option value="3"&gt;3&lt;/option&gt; &lt;option value="4"&gt;4&lt;/option&gt; &lt;option value="5"&gt;5&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;td align="left"&gt;&lt;span id="order_subtotal"&gt;$0.00&lt;/span&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Benefit 4&lt;/td&gt; &lt;td align="center"&gt;&lt;select id="qty" name="BENE_4_25" onchange="CalculateEstimatedSavings(this.form)" &gt; &lt;option value="0"&gt;0&lt;/option&gt; &lt;option value="1"&gt;1&lt;/option&gt; &lt;option value="2"&gt;2&lt;/option&gt; &lt;option value="3"&gt;3&lt;/option&gt; &lt;option value="4"&gt;4&lt;/option&gt; &lt;option value="5"&gt;5&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;td align="left"&gt;&lt;span id="order_subtotal"&gt;$0.00&lt;/span&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Benefit 5&lt;/td&gt; &lt;td align="center"&gt;&lt;select id="qty" name="BENE_5_25" onchange="CalculateEstimatedSavings(this.form)" &gt; &lt;option value="0"&gt;0&lt;/option&gt; &lt;option value="1"&gt;1&lt;/option&gt; &lt;option value="2"&gt;2&lt;/option&gt; &lt;option value="3"&gt;3&lt;/option&gt; &lt;option value="4"&gt;4&lt;/option&gt; &lt;option value="5"&gt;5&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;td align="left"&gt;&lt;span id="order_subtotal"&gt;$0.00&lt;/span&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Benefit 6&lt;/td&gt; &lt;td align="center"&gt;&lt;select id="qty" name="BENE_6_25" onchange="CalculateEstimatedSavings(this.form)" &gt; &lt;option value="0"&gt;0&lt;/option&gt; &lt;option value="1"&gt;1&lt;/option&gt; &lt;option value="2"&gt;2&lt;/option&gt; &lt;option value="3"&gt;3&lt;/option&gt; &lt;option value="4"&gt;4&lt;/option&gt; &lt;option value="5"&gt;5&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;td align="left"&gt;&lt;span id="order_subtotal"&gt;$0.00&lt;/span&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Benefit 7&lt;/td&gt; &lt;td align="center"&gt;&lt;select id="qty" name="BENE_7_773" onchange="CalculateEstimatedSavings(this.form)" &gt; &lt;option value="0"&gt;0&lt;/option&gt; &lt;option value="1"&gt;1&lt;/option&gt; &lt;option value="2"&gt;2&lt;/option&gt; &lt;option value="3"&gt;3&lt;/option&gt; &lt;option value="4"&gt;4&lt;/option&gt; &lt;option value="5"&gt;5&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;td align="left"&gt;&lt;span id="order_subtotal"&gt;$0.00&lt;/span&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &amp;nbsp; &lt;table cellpadding="5" cellspacing="3" style="color: #1666AF; font-size:13px; font-weight:bold;" width="280"&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td width="62%"&gt;&lt;span&gt;Estimated Total Savings:&lt;/span&gt;&lt;/td&gt; &lt;td align="left" width="38%"&gt;&lt;span id="total_savings"&gt;$0.00&lt;/span&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &amp;nbsp; &lt;div style="width:280px; clear:both;"&gt;&lt;a href="#" style="border:none; float:right;"&gt;&lt;img src="start-saving_sm.png" /&gt;&lt;/a&gt;&lt;/div&gt; &lt;/fieldset&gt; &lt;/form&gt; &lt;script type="text/javascript"&gt; function CalculateEstimatedSavings(frm) { var total_savings = 0 // Run through all the form fields for (var i=0; i &lt; frm.elements.length; ++i) { // Get the current field form_field = frm.elements[i] // Get the field's name form_name = form_field.name // Is it a "product" field? if (form_name.substring(0,4) == "BENE") { // If so, extract the price from the name item_price = parseFloat(form_name.substring(form_name.lastIndexOf("_") + 1)) // Get the quantity item_quantity = parseInt(form_field.value) // Update the order total if (item_quantity &gt;= 0) { total_savings += item_quantity * item_price } } } // Display the total rounded to two decimal places document.getElementById("total_savings").firstChild.data = "$" + round_decimals(total_savings, 2) } function round_decimals(original_number, decimals) { var result1 = original_number * Math.pow(10, decimals) var result2 = Math.round(result1) var result3 = result2 / Math.pow(10, decimals) return pad_with_zeros(result3, decimals) } function pad_with_zeros(rounded_value, decimal_places) { // Convert the number to a string var value_string = rounded_value.toString() // Locate the decimal point var decimal_location = value_string.indexOf(".") // Is there a decimal point? if (decimal_location == -1) { // If no, then all decimal places will be padded with 0s decimal_part_length = 0 // If decimal_places is greater than zero, tack on a decimal point value_string += decimal_places &gt; 0 ? "." : "" } else { // If yes, then only the extra decimal places will be padded with 0s decimal_part_length = value_string.length - decimal_location - 1 } // Calculate the number of decimal places that need to be padded with 0s var pad_total = decimal_places - decimal_part_length if (pad_total &gt; 0) { // Pad the string with 0s for (var counter = 1; counter &lt;= pad_total; counter++) value_string += "0" } return value_string } &lt;/script&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USliza
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COyou are passing null into function, this.form doesn't exist. actually you didn't post part of html
      singulars
      1. PODisplay SubTotal and Total at the same time - Javascript
      1. USGena Moroz
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload