Jump to content

vincej

Members
  • Content Count

    155
  • Joined

  • Last visited

Community Reputation

0 Neutral

About vincej

  • Rank
    Advanced Member

Profile Information

  • Gender
    Not Telling
  • Location
    Calgary , Canada
  1. 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>
  2. I work with PHP and I'm not good with JS. I want to use a Twitter Boostrap tab funnction: http://getbootstrap.com/javascript/#tabs I need some guidance how it uses the JS code mentioned. The code below taken from the Bootstrap page is obvious enough: $('#myTab a').click(function (e) { e.preventDefault() $(this).tab('show') }) What I do not understand is how I am required to use the following code in the context of the previous code. Ok, I get that I have to choose one option, but I don't get how they fit together and I do not get how I can have 5-7 tabs and how they will be highlighted one after the other as per the given example on the Bootstrap page : $('#myTab a[href="#profile"]').tab('show') // Select tab by name $('#myTab a:first').tab('show') // Select first tab $('#myTab a:last').tab('show') // Select last tab $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed) Many thanks for all your help !
×
×
  • 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.