Jump to content
vincej

Javascript: How to retrieve the computed value of an input

Recommended Posts

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?

post-77950-0-51955800-1455917858_thumb.png

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 by vincej

Share this post


Link to post
Share on other sites

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?

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.