lovephp Posted May 22, 2014 Share Posted May 22, 2014 <html> <head> <title>Sum Html Textbox Values using jQuery/JavaScript</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(function() { $(document).on('blur keyup', '.add, .sub', function(e) { var sum = 0; $('.add, .sub').each(function(i) { if (!isNaN(this.value) && this.value.length != 0) { if ($(this).hasClass('add')) { sum += parseFloat(this.value); } else { sum -= parseFloat(this.value); } } }); $('#total').text(sum.toFixed(2)); }) }) </script> </head> <body> <form method="post" action="calc.php"> Addition: <br/> Field 1: <input type="text" class="add" name="1" value="7500"/><br/> Field 2: <input type="text" class="add" name="2" value=""/><br/> Field 3: <input type="text" class="add" name="3" value=""/><br/> Field 4: <input type="text" class="add" name="4" value=""/><br/><br/> Total Addition: <br/><br/> Substraction: <br/> Field 1: <input type="text" class="sub" name="5" value=""/><br/> Field 2: <input type="text" class="sub" name="6" value=""/><br/> Field 3: <input type="text" class="sub" name="7" value=""/><br/> Field 4: <input type="text" class="sub" name="8" value=""/><br/><br/> Total Substraction: <br/><br/> Grand Total: <div id="total"></div> <input type="submit" value="submit" /> </form> </body> </html> Quote Link to comment Share on other sites More sharing options...
Psycho Posted May 22, 2014 Share Posted May 22, 2014 Do you have a question? Quote Link to comment Share on other sites More sharing options...
lovephp Posted May 22, 2014 Author Share Posted May 22, 2014 (edited) yes ofcourse, im trying to get the total substraction output as say field 1 i add 500 and field 2 i add 100 the the output should be 600 i have run it here http://jsfiddle.net/KXGEY/8/ all works fine except the total substraction part. Edited May 22, 2014 by lovephp Quote Link to comment Share on other sites More sharing options...
Psycho Posted May 22, 2014 Share Posted May 22, 2014 (edited) Both the addition and subtraction 'appear' to be working correctly for me. But, again, you have not stated any problem. If your problem is important enough that you need a resolution, at least take the time to adequately explain what it is you are trying to accomplish, what problem you are having (e.g. what isn't working correct and any errors you are getting), and what you have tried thus far to resolve and the results. $(function() { $(document).on('blur keyup', '.add, .sub', function(e) { var add = 0; var sub = 0; var sum = 0; $('.add').each(function(i) { if (!isNaN(this.value) && this.value.length != 0) { add += parseFloat(this.value); } }); $('.sub').each(function(i) { if (!isNaN(this.value) && this.value.length != 0) { sub += parseFloat(this.value); } }); sum = add - sub; $('#totaladd').text(add.toFixed(1)); $('#totalsub').text(sub.toFixed(1)); $('#total').text(sum.toFixed(2)); }) }) Edited May 22, 2014 by Psycho Quote Link to comment Share on other sites More sharing options...
lovephp Posted May 22, 2014 Author Share Posted May 22, 2014 sorry for my bad english i really am not good at asking questions nor explaining dunno why but cheers u got me right and now i get what i was looking for one last help bro i need to get the values of <label id="totaladd"></label> and <label id="totalsub"></label> and <label id="total"></label> in some input field aswell i think it could be done by hidden field but not getting the right way to do it. maybe you could help me achieve it too? Quote Link to comment Share on other sites More sharing options...
Solution Psycho Posted May 22, 2014 Solution Share Posted May 22, 2014 Then don't put the output into LABELs and instead put them into read-only input fields. If you don't want them to "look" like input fields then remove the border via CSS: http://jsfiddle.net/KXGEY/12/ But . . . why would you need to do this? You should NOT be passing the calculated values in your POST data. You should recalculate on the server-side. Never trust any input coming from the user. They can manipulate anything on the form. Quote Link to comment Share on other sites More sharing options...
lovephp Posted May 23, 2014 Author Share Posted May 23, 2014 oh yes bro server side through php am rechecking, this is only for users to see the calculated results. btw thumbs up to u i had been trying to sort this for hours Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.