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>

Thanks Kicken, OK - this makes sense. as I said at the outset, I have used the old fashioned 'where' clause for years, and conceptually it always seems to be easier to grasp. I have been playing around for a day or two with the 4 different join types on a simple 2 table situation, and so far I have not yet really been able to see a significant benefit to using JOIN. In fact if you use Codeigniter, as I do, there they still give it prominence in their classes. Am I missing something ?? Many Thanks !

Sorry Kicken ! I am grateful for you r clear answer and my follow-up was meant for you !

Thanks CPD that's excellent - next silly question: when constructing a query, how do you decide which table should be left and which right .. you could put them either way around , no ? cheers !

HI - For years I have avoided using Joins prefering the more obvious 'where' clause. Time I caught up .. and so in reading the literature on Joins I ask the obvious question: how do you tell if a table is Left or right .. I mean you can hardly put them on the desk to look ! All of the literature I have read assumes you just 'know by magic'. Sorry if this is a silly question - but the obvious can defeat us !