title: Javascript: How to retrieve the computed value of an input
body: <p>I am new to Javascript, so please forgive me if this is a dumb question</p>
  
  <p>My JS code computes the value of "cost" and it sets it into the input of a a form using <strong>row.val(cost)</strong>. When it has calculated all the costs for all the products, adding, subtracting and multiplying, I want to find the total. So, I now scan through all the cost inputs using an "each" method and create a sum total. </p>
  
  <p>Problem: the calculated cost inputs are visible on the screen, however they do not appear in the source code, so, I can not grab them using the selector <strong>$("input.cost")</strong></p>
  
  <p>Question: How to I grab the values of the computed cost values which are visible in the input fields? </p>
  
  <pre><code>var runningTotal = 0; // THIS IS DECLARED AS A GLOBAL
  
  $("input.quantity").on('change', function() {
  
      var row = $(this).parents(':eq(1)').find('input').filter(".cost");
      var price = row.data('price');
  
      if (price) {
          var quantity = parseFloat($(this).val());
          var cost = (price * quantity);
  
          row.val(cost);  // COST INSERTED HERE!!
  
                   $("input.cost").each(function(){
                       var ic = $(this).val(); // TRIED USING HTML AND TEXT METHODS.  
                       var inputCost = Number(ic);
                       runningTotal += inputCost;
                   });
  
               $("#total").val(runningTotal);
  
  
           }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <p>I use Laravel Blade, but here is a snippet the rendered HTML source code. Of course there is no value visible. </p>
  
  <pre><code> &lt;div class="well form-group  "&gt;
                              &lt;div class="col-sm-2 col-md-2"&gt;&lt;label for="underlay2"&gt;Underlayments:&lt;/label&gt;&lt;/div&gt;
                              &lt;div class="col-sm-4 col-md-4"&gt;&lt;select class="form-control product_id" name="product_code[4]"&gt;&lt;option selected="selected" value=""&gt;None&lt;/option&gt;&lt;option value="789"&gt;BP #15 Plain Felt 36&amp;quot; | $10.00&lt;/option&gt;&lt;option value="790"&gt;BP #30 Plain Felt 36&amp;quot; | $10.00&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;
                              &lt;div class="col-sm-1  col-md-1"&gt;&lt;label for="underlay2_req"&gt;Quantity:&lt;/label&gt;&lt;/div&gt;
                              &lt;div class="col-sm-2 col-md-2"&gt;&lt;input class="form-control  quantity" name="quantity[4]" type="text"&gt;&lt;/div&gt;
                              &lt;div class="col-sm-1  col-md-1"&gt;&lt;label for="cost"&gt;Cost:&lt;/label&gt;&lt;/div&gt;
                              &lt;div class="col-sm-2 col-md-2"&gt;&lt;input class="form-control cost" readonly="readonly" name="cost[0]" type="text" value=""&gt;&lt;/div&gt;
                          &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/xxj26.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xxj26.png" alt="Screen Shot"></a></p>