Databases
StackOverflow2013
Postsdbo
POAutomate jQuery Calculator with dropdown and input
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAutomate jQuery Calculator with dropdown and input
    text
    copied!<p>I'm going to sum the values from different types of form elements. Drop down and input. The process is going well but I'm stuck at the total is not automate update after I change an option.</p> <p><strong>Here is my code:</strong></p> <pre><code>&lt;form&gt; &lt;label&gt;cost: &lt;input type="text" name="cost_1" size="5" class="summable"/&gt;&lt;/label&gt; &lt;label&gt;qty: &lt;input type="text" name="cost_1_qty" size="2"/&gt;&lt;/label&gt;&lt;br/&gt; &lt;label&gt;cost: &lt;input type="text" name="cost_2" size="5" class="summable"/&gt;&lt;/label&gt; &lt;label&gt;qty: &lt;select name="cost_2_qty"&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;/label&gt;&lt;br/&gt; &lt;label&gt;cost: &lt;input type="text" name="cost_3" size="5" class="summable"/&gt;&lt;/label&gt; &lt;label&gt;qty: &lt;input type="text" name="cost_3_qty" size="2"/&gt;&lt;/label&gt;&lt;br/&gt; &lt;strong id="summation"&gt;&lt;/strong&gt;&lt;br/&gt; &lt;/form&gt; &lt;script type="text/javascript"&gt; function doTotal() { var total = 0.0; $(".summable").each(function (idx, element) { $this = $(this); var cost = parseFloat($this.val()); var qty_selector = '[name=' + $this.attr('name') + '_qty' + ']'; // eg: [name=cost_3_qty] var qty = parseFloat($(qty_selector).val()); if (cost &amp;&amp; qty) total += cost * qty ; }); $("#summation").html(total.toFixed(2)); } $(document).ready(function() { $("input[type=text]").blur(function (e) { doTotal(); }) }); &lt;/script&gt; </code></pre> <p>Live version here: <a href="http://jsfiddle.net/hWcMv/" rel="nofollow">http://jsfiddle.net/hWcMv/</a></p> <p>I need a total value to be calculated right after an option is selected. Please suggest.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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