title: Automate jQuery Calculator with dropdown and input
body: <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>