Javascript: How to retrieve the computed value of an input

[vincej]

I am new to Javascript, so please forgive me if this is a dumb question

See attached screen shot. My JS code computes the value of "cost" and it sets it into the input of a a form using row.val(cost). 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.

Problem: the calculated cost inputs are visible on the screen. If a user changes their mind about the quantity required on a particular line item, the grand total must be recalculated. However the line totals are calculated. Therefore, they do not appear in the source code, so, I can not grab them using the selector $("input.cost")

Question: How do I grab the values of the computed cost values which are visible in the input fields?

row.data('price')   // THIS IS DECLARED IN AN EARLIER FUNCTION. 
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);


         }

HTML for a typical row:  ( I am using Laravel Blade, however this is the rendered HTML) 

 <div class="well form-group  ">
 <div class="col-sm-2 col-md-2"><label for="underlay2">Underlayments:</label></div>
 <div class="col-sm-4 col-md-4"><select class="form-control product_id" name="product_code[4]"><option selected="selected" value="">None</option><option value="789">BP #15 Plain Felt 36" | $10.00</option><option value="790">BP #30 Plain Felt 36" | $10.00</option></select></div>
 <div class="col-sm-1  col-md-1"><label for="underlay2_req">Quantity:</label></div>
 <div class="col-sm-2 col-md-2"><input class="form-control  quantity" name="quantity[4]" type="text"></div>
 <div class="col-sm-1  col-md-1"><label for="cost">Cost:</label></div>
 <div class="col-sm-2 col-md-2"><input class="form-control cost" readonly="readonly" name="cost[0]" type="text" value=""></div>
</div>

Edited February 19, 2016 by vincej

[kicken]

The .val() method will give you the value of the input, regardless of whether it was set by code or typed in by the user.

 

If you're adding any number formatting to the cost such as commas or dollar signs then you'll need to remove that formatting before reading the value out and trying to use it to calculate the total.

 

You'll also need to reset your runningTotal to zero each time before trying to calculate the total. Other than missing this, your code looks fine as is.

 

Your code works fine with the runningTotal reset and fixing the syntax problems (assuming copy/paste error). See the fiddle

 

When you post code try and make sure it's syntatically correct/complete. Also it helps if you describe why you think something isn't working rather than just saying what you think the problem is. What did you think that .val() was not working to get the computed values? What kind of problem were you seeing?