jquery do calculation (in function) when loading page -
i need calculate average of inputs, sum , print in input #average.
i using (adapted) code http://viralpatel.net/blogs/sum-html-textbox-values-using-jquery-javascript/
<script> $(document).ready(function(){ //iterate through each textboxes , add keyup //handler trigger sum event $(".sum").each(function() { $(this).keyup(function(){ calculatesum(); }); }); }); function calculatesum() { var sum = 0; //iterate through each textboxes , add values $(".sum").each(function() { //add if value number if(!isnan(this.value) && this.value.length!=0) { sum += parsefloat(this.value) /7; } }); //.tofixed() method roundoff final sum 2 decimal places $("#average").val(sum.tofixed(2)); } </script> edited:
i have 1 problem now:
1) when load page (and inputs.sum retrieve data db) #average blank, until don't modify input.
how should modify code ?
my proposal compute average on document ready , every time change input field happens (iused input field type number snippet works input type text):
function calculateaverage() { var sum = 0; var numofinputs = $(".sum").length; $(".sum").each(function (index, ele) { if (!isnan(this.value) && this.value.length != 0) { sum += parsefloat(this.value); } }); $("#average").val((sum / numofinputs).tofixed(0)); } $(function () { // compute average @ document ready calculateaverage(); // compute average whenever input field change $(".sum").on('input', function() { calculateaverage(); }); });body { font-family: sans-serif; } #average { font-size: 18px; font-weight: bold; color:#174c68; margin-left: 10px; } input { background-color: #feffb0; font-weight: bold; text-align: right; width: 10%; }<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <form> number 1: <input type='number' class="sum" value="1"><br> number 2: <input type='number' class="sum" value="2"><br> number 3: <input type='number' class="sum" value="3"><br> average: <input type="number" id="average"> </form>if have more averages compute loop should be:
function calculateaverage() { var sum = 0; var numofinputs = 0; for(var = 1; i<5; i++) { sum = 0; numofinputs = $(".sum" + i).length; $(".sum" + i).each(function (index, ele) { if (!isnan(this.value) && this.value.length != 0) { sum += parsefloat(this.value); } }); $("#average" + i).val((sum / numofinputs).tofixed(0)); } } $(function () { calculateaverage(); $('[class^="sum"]').on('input', function() { calculateaverage(); }); });body { font-family: sans-serif; } label { display: inline-block; font-size: 18px; text-align: left; width: 15%; } input.average { background-color: #feffb0; font-size: 18px; font-weight: bold; text-align: right; color:#174c68; width: 10%; } input[class^="sum"] { background-color: #feffb0; font-weight: bold; text-align: right; width: 10%; }<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <form> <label>number 1:</label> <input type='number' class="sum1" value="1"> <input type='number' class="sum2" value="1"> <input type='number' class="sum3" value="1"> <input type='number' class="sum4" value="1"><br> <label>number 2:</label> <input type='number' class="sum1" value="2"> <input type='number' class="sum2" value="2"> <input type='number' class="sum3" value="2"> <input type='number' class="sum4" value="2"><br> <label>number 3:</label> <input type='number' class="sum1" value="3"> <input type='number' class="sum2" value="3"> <input type='number' class="sum3" value="3"> <input type='number' class="sum4" value="3"><br> <label>average:</label> <input type="number" class="average" id="average1"> <input type="number" class="average" id="average2"> <input type="number" class="average" id="average3"> <input type="number" class="average" id="average4"> </form>instead, if can organize input in table result more simple:
function calculateaverage() { var sum = 0; var numofinputs = $('table > tbody > tr').length; // clear averages $('table > tfoot > tr > td:gt(0)').each(function(index, ele) { $(ele).find('.average').val('0'); }); // each row in body $('table > tbody > tr').each(function(index, ele) { // each column in current row $(ele).find('td:gt(0)').each(function(index, ele) { // update corresponding average computing sum var currval = parsefloat($(ele).find('.sum').val()) || 0; var curraverageobj = $('table > tfoot > tr > td:eq(' + (index + 1) + ') > input'); curraverageobj.val(parsefloat(curraverageobj.val()) + currval); }); }); // adjust average value dividing number of elements $('table > tfoot > tr > td:gt(0)').each(function(index, ele) { var currentaverageobj = $(ele).find('.average'); currentaverageobj.val((parsefloat(currentaverageobj.val()) / numofinputs).tofixed(0)); }); } $(function () { calculateaverage(); $('[class^="sum"]').on('input', function() { calculateaverage(); }); });body { font-family: sans-serif; } .average { font-size: 18px; font-weight: bold; color:#174c68; text-align: right; width: 99%; } input { background-color: #feffb0; font-weight: bold; text-align: right; } td { width: 50px; }<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <form> <table> <thead> <tr> <th></th> <th>value1</th> <th>value2</th> <th>value3</th> <th>value4</th> <th>value5</th> </tr> </thead> <tbody> <tr> <td>elems1</td> <td><input type='text' class="sum" value="1"></td> <td><input type='text' class="sum" value="2"></td> <td><input type='text' class="sum" value="3"></td> <td><input type='text' class="sum" value="4"></td> <td><input type='text' class="sum" value="5"></td> </tr> <tr> <td>elems2</td> <td><input type='text' class="sum" value="1"></td> <td><input type='text' class="sum" value="2"></td> <td><input type='text' class="sum" value="3"></td> <td><input type='text' class="sum" value="4"></td> <td><input type='text' class="sum" value="5"></td> </tr> <tr> <td>elems3</td> <td><input type='text' class="sum" value="1"></td> <td><input type='text' class="sum" value="2"></td> <td><input type='text' class="sum" value="3"></td> <td><input type='text' class="sum" value="4"></td> <td><input type='text' class="sum" value="5"></td> </tr> <tr> <td>elems4</td> <td><input type='text' class="sum" value="1"></td> <td><input type='text' class="sum" value="2"></td> <td><input type='text' class="sum" value="3"></td> <td><input type='text' class="sum" value="4"></td> <td><input type='text' class="sum" value="5"></td> </tr> </tbody> <tfoot> <tr> <td>average</td> <td><input type="text" class="average"></td> <td><input type="text" class="average"></td> <td><input type="text" class="average"></td> <td><input type="text" class="average"></td> <td><input type="text" class="average"></td> </tr> </tfoot> </table> </form>
Comments
Post a Comment